/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek-ext */
/* greek */
/* math */
/* symbols */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* cyrillic-ext */
/* cyrillic */
/* greek */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* vietnamese */
/* latin-ext */
/* latin */
/* ============================================================
Minimal Code — Design System
Font: Roboto / Roboto Mono
Accent: #a70000 (no shadows anywhere)
============================================================ */
:root {
--accent: #a70000;
--accent-ink: #ffffff;
/* Light mode defaults */
--bg: #ffffff;
--bg-soft: #fafafa;
--bg-elev: #ffffff;
--ink: #0a0a0a;
--ink-2: #2a2a2a;
--ink-3: #6b6b6b;
--ink-4: #a0a0a0;
--hair: #e8e8e8;
--hair-strong: #d4d4d4;
/* Control boundaries. --hair-strong is 1.48:1 on --bg and fails WCAG 1.4.11,
which needs 3:1 where the boundary identifies the control. #8a8a8a is 3.45:1
on #ffffff and 5.48:1 on #0a0a0a, so one value serves both surfaces. */
--border-control: #8a8a8a;
/* Surface-bound colour. Measured, because neither value works on both surfaces:
--accent #a70000 is 7.95:1 on --bg but 2.49:1 on --ink;
--accent-on-dark #ff6b6b is 7.13:1 on --ink but 2.66:1 on --bg-soft.
These are one role on two surfaces, not two shades to be merged. Each is
barred from the other's surface. --ink-on-dark is 12.84:1 on --ink. */
--ink-on-dark: #f5f5f5;
--ink-muted-on-dark: #999999;
--hair-on-dark: #222222;
--accent-on-dark: #ff6b6b;
/* Density (tweakable) */
--density: 1;
--pad-y: calc(96px * var(--density));
--pad-x: clamp(20px, 4vw, 80px);
--gap: calc(24px * var(--density));
/* Type */
--font-head: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--fs-hero: clamp(40px, 4.4vw, 68px);
--fs-h2: clamp(32px, 3vw, 46px);
--fs-h3: clamp(22px, 2vw, 28px);
--fs-body: 16px;
--fs-small: 13px;
--fs-micro: 12px;
--fs-card: 19px;
--fs-cta: clamp(32px, 3.4vw, 52px); /* closing CTA heading, the size sig uses */ /* card title: the size sig uses for its own */
}
/* Vertical rhythm scales with the viewport. Redefining the token on :root moves every
band on the site from one place; the alternative - a media query per band - is how
this stylesheet ended up with six competing rhythms. Widths are sig's. */
@media (max-width: 1024px) { :root { --pad-y: calc(72px * var(--density)); } }
@media (max-width: 700px) { :root { --pad-y: calc(56px * var(--density)); } }
[data-theme="dark"] {
--bg: #0a0a0a;
--bg-soft: #111111;
--bg-elev: #141414;
--ink: #f5f5f5;
--ink-2: #dcdcdc;
--ink-3: #a0a0a0;
--ink-4: #6b6b6b;
--hair: #262626;
--hair-strong: #3a3a3a;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background .4s ease, color .4s ease;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
/* -----------------------------------------
Utility
----------------------------------------- */
.container {
width: 100%;
max-width: min(1560px, calc(100% - 48px));
margin: 0 auto;
padding-inline: 0;
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-micro);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 0;
height: 1px;
background: var(--accent);
display: none;
}
.h-section {
font-family: var(--font-head);
font-weight: 500;
font-size: var(--fs-h2);
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
text-wrap: balance;
}
.h-card {
font-family: var(--font-head);
font-weight: 500;
font-size: var(--fs-card);
letter-spacing: -0.015em;
line-height: 1.15;
margin: 0;
}
.mono {
font-family: var(--font-mono);
font-size: var(--fs-small);
letter-spacing: 0.02em;
}
.lede {
font-size: clamp(15px, 1.1vw, 18px);
color: var(--ink-3);
max-width: 62ch;
line-height: 1.55;
margin: 0;
}
/* Buttons (no shadows) */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: .01em;
border: 1px solid transparent;
border-radius: 0;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
text-decoration: none;
line-height: 1;
}
.btn-primary {
background: var(--accent);
color: var(--accent-ink);
border-color: var(--accent);
}
.btn-primary:hover { background: #8a0000; border-color: #8a0000; }
/* .btn-lg had no base definition and existed only as `.p-gpu .btn-lg`, so the
class was inert everywhere else: `btn btn-primary btn-lg` rendered at the
43px base height on cloud-infrastructure and 52px on private-ai-gpu-cloud.
One definition, matching what .p-gpu already used. */
.btn-lg { padding: 18px 28px; font-size: 15px; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(4px); }
/* Sections */
section { padding-block: var(--pad-y); }
.section-head {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: calc(var(--pad-y) * 0.5);
}
.section-head-row {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
/* Hairline */
.hr { height: 1px; background: var(--hair); border: 0; margin: 0; }
/* Focus */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity .8s ease, transform .8s ease;
}
.reveal.in {
opacity: 1;
transform: translateY(0);
}
/* Image placeholder (striped) */
.ph {
position: relative;
background: var(--bg-soft);
border: 1px solid var(--hair);
overflow: hidden;
}
.ph::before {
content: "";
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
135deg,
transparent 0 14px,
color-mix(in oklab, var(--ink) 4%, transparent) 14px 15px
);
}
.ph .ph-label {
position: absolute;
left: 16px; bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--bg);
padding: 4px 8px;
border: 1px solid var(--hair);
}
/* ============================================================
Section-specific styles
============================================================ */
/* -------- HEADER -------- */
.mc-header.scrolled {
border-bottom-color: var(--hair);
}
.mc-header.scrolled .mc-header-inner { height: 60px; }
.mc-logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-head);
font-weight: 700;
letter-spacing: -0.01em;
font-size: 16px;
}
.mc-header .btn { padding: 10px 16px; font-size: 13px; }
/* -------- HERO -------- */
.hero-title .accent {
color: var(--accent);
font-style: italic;
font-weight: 400;
}
/* Vertical links row */
/* Hero visual (dashboard / photo placeholder) */
.hv-metric .label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.hv-metric.accent-bg .label { color: rgba(255,255,255,.7); }
.hv-chart-head .t { font-size: 13px; font-weight: 500; }
.hv-chart-head .m { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.hv-right .ph-bottom .big {
font-family: var(--font-head);
font-weight: 500;
font-size: 32px;
letter-spacing: -.02em;
line-height: 1;
}
.hv-right .ph-bottom .cap {
font-family: var(--font-mono);
font-size: 11px;
margin-top: 8px;
opacity: .7;
letter-spacing: .08em;
text-transform: uppercase;
}
/* -------- CORE VERTICALS -------- */
.cv-section { background: var(--bg); }
.cv-intro {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 80px;
align-items: center;
margin-bottom: 80px;
}
.cv-intro .lede { max-width: none; }
.vertical {
padding-block: 72px;
}
/* The number+name now heads the whole block on its own full-width row, so it is sized to
read as a label rather than a caption. .1em tracking is too airy once the type is this big. */
.vertical-title .h-section { margin-bottom: 12px; }
.vertical-link {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 22px;
font-size: 14px;
font-weight: 500;
color: var(--accent);
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
transition: gap .2s ease;
}
.vertical-link:hover { gap: 14px; }
/* Product cards within a vertical */
.product-grid { display: grid; gap: 24px; margin-top: 12px; }
.product-grid.stacked { grid-template-columns: 1fr; }
.product-grid.split { grid-template-columns: repeat(2, 1fr); }
.product-grid.triad { grid-template-columns: repeat(3, 1fr); }
.product {
border: 1px solid var(--hair);
background: var(--bg-elev);
overflow: hidden;
display: grid;
transition: border-color .25s ease, transform .3s ease;
}
.product.horizontal { grid-template-columns: 1fr 1.1fr; min-height: 260px; }
.product.vertical-card { grid-template-rows: 200px auto; }
.product:hover {
border-color: var(--ink);
}
.product:hover .product-cta .arrow { transform: translateX(4px); }
.product-copy {
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 18px;
}
.product-copy .tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-3);
}
.product-copy h4 {
font-family: var(--font-head);
font-weight: 500;
font-size: 22px;
letter-spacing: -.01em;
line-height: 1.15;
margin: 8px 0 10px;
}
.product-copy h4 .accent { color: var(--accent); }
.product-copy p {
font-size: 14px;
color: var(--ink-3);
margin: 0;
line-height: 1.55;
}
.product-cta {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--ink);
padding: 10px 0;
border-bottom: 1px solid var(--ink);
width: fit-content;
}
.product-cta-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.product-cta.secondary { color: var(--accent); border-bottom-color: var(--accent); }
.product-cta .arrow { transition: transform .25s ease; }
/* Special: DC hero product block */
@keyframes pulseDot {
0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* Media placeholder content */
.media-overlay .row {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 20px;
}
/* -------- WHY MINIMAL CODE -------- */
.pillar .num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
letter-spacing: .1em;
}
/* -------- TECHNICAL PROWESS -------- */
.prowess-item .label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 16px;
}
.prowess-item .val .unit {
font-size: .5em;
color: var(--ink-3);
margin-left: 4px;
}
.prowess-item .desc {
font-size: 13px;
color: var(--ink-3);
line-height: 1.5;
}
/* -------- WHY CONTACT US -------- */
.cw-item p.always { max-height: 200px; opacity: 1; }
/* -------- TESTIMONIAL -------- */
.t-copy .quote {
font-family: var(--font-head);
font-weight: 300;
font-size: clamp(22px, 2.2vw, 34px);
letter-spacing: -.015em;
line-height: 1.3;
color: var(--ink);
margin: 0 0 36px;
min-height: 240px;
text-wrap: pretty;
}
.t-copy .quote .em { color: var(--accent); font-style: italic; font-weight: 400; }
.t-copy .author {
font-family: var(--font-head);
font-weight: 500;
font-size: 15px;
margin: 0;
}
.t-copy .role {
font-size: 13px;
color: var(--ink-3);
margin-top: 2px;
}
.t-dot.active { background: var(--accent); width: 40px; }
/* -------- CONTACT FORM -------- */
.contact-section {
background: var(--accent);
color: var(--accent-ink);
position: relative;
}
.contact-section .eyebrow { color: rgba(255,255,255,.7); }
.contact-section .eyebrow::before { background: #fff; }
.contact-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-wrap h2 {
font-family: var(--font-head);
font-weight: 500;
font-size: var(--fs-cta);
letter-spacing: -.03em;
line-height: 1;
margin: 20px 0 24px;
}
.form {
display: grid;
gap: 4px;
background: #fff;
color: var(--ink);
padding: 32px;
border: 1px solid rgba(255,255,255,.2);
}
.form-row {
display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr;
}
/* Fields: the design system's 1B "Dolgu" treatment (karar 16.08.2026), tenant-wide.
The retired underline/borderless input was removed from every form on 10.09.2026 —
/contact, the homepage .cform band and the p-dvo/p-sdv/p-hci page forms all inherit
these rules; only the custom select chevron stays with .cform below. Error state is
.field.err (siteJs adds it on contactform:invalid). Focus keeps a visible indicator —
outline:none is banned (WCAG 2.4.7, decision 03.08.2026).
background-COLOR rather than the shorthand: .cform's select chevron is a
background-image, and the shorthand would erase it. */
.field { position: relative; padding: 10px 0 0; }
.field label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.field input, .field textarea, .field select {
width: 100%;
border: 1px solid transparent;
background-color: var(--bg-soft);
font-family: var(--font-body);
font-size: 16px;
color: var(--ink);
padding: 12px 14px;
resize: vertical;
transition: background-color .2s ease, border-color .2s ease;
}
.field input:hover, .field textarea:hover, .field select:hover { background-color: #f2f2f2; }
.field input:focus, .field textarea:focus, .field select:focus { background-color: var(--bg); border-color: var(--ink); }
.field.err input, .field.err textarea, .field.err select { border-color: var(--accent); background-color: rgba(167,0,0,.05); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.field textarea { min-height: 150px; }
.field .err-msg {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
margin-top: 6px;
letter-spacing: .04em;
min-height: 14px;
}
.form-submit { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.form-submit .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
/* -------- FOOTER -------- */
.mc-footer {
background: var(--ink);
color: var(--ink-on-dark);
padding-top: 80px;
padding-bottom: 24px;
}
[data-theme="dark"] .mc-footer { background: #000; }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 64px;
border-bottom: 1px solid var(--hair-on-dark);
}
.footer-brand .mc-logo { color: #fff; font-size: 20px; }
.footer-brand p {
color: var(--ink-muted-on-dark);
font-size: 14px;
max-width: 36ch;
margin: 20px 0 0;
line-height: 1.55;
}
.footer-col h6 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-muted-on-dark);
margin: 0 0 18px;
font-weight: 400;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--ink-on-dark); font-size: 14px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .06em;
color: var(--ink-muted-on-dark);
}
.footer-bottom .locations { display: flex; gap: 20px; }
.footer-bottom .locations span { display: flex; gap: 6px; align-items: center; }
.footer-bottom .locations span::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
/* -------- TWEAKS PANEL -------- */
.tweaks-panel.open { display: block; }
.tweak-swatches button.active { outline: 2px solid var(--ink); outline-offset: 2px; }
.tweak-opts button.active { background: var(--ink); color: var(--bg); }
/* -------- RESPONSIVE -------- */
@media (max-width: 1000px) {
.cv-intro { grid-template-columns: 1fr; gap: 24px; }
.product.horizontal { grid-template-columns: 1fr; }
.contact-wrap { grid-template-columns: 1fr; gap: 40px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.product-grid.split, .product-grid.triad { grid-template-columns: 1fr; }
}
/* -------- TEXT REVEAL (HSM / FINMA) -------- */
.tr-char.in {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* -------- WHY CONTACT US V2 (testimonial-style) -------- */
.cw-photo.active { opacity: 1; }
.cw-visual-overlay .row {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 20px;
}
.cw-body .em {
color: var(--accent);
font-style: italic;
font-weight: 400;
}
/* ============================================================
HERO V2 — editorial image + floating card bar
============================================================ */
.hero-v2 {
padding-top: 0;
margin-top: 8px;
overflow: visible;
}
.hv2-stage {
position: relative;
width: 100%;
height: clamp(460px, 62vh, 680px);
overflow: hidden;
}
.hv2-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(8%) contrast(1.02) brightness(0.88);
}
.hv2-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.55) 100%),
radial-gradient(120% 80% at 30% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
}
.hv2-inner {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
color: #fff;
padding-bottom: 90px;
}
.hv2-eyebrow .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(167,0,0,.18);
}
.hv2-title {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(44px, 6.2vw, 96px);
line-height: 1.02;
letter-spacing: -0.03em;
margin: 0;
max-width: 18ch;
text-wrap: balance;
color: #fff;
}
.hv2-title .accent-italic {
font-style: italic;
font-weight: 300;
color: #fff;
}
/* Floating card bar pulled upward, overlaps hero image */
.hv2-bar {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--bg);
border: 1px solid var(--hair);
box-shadow: 0 24px 60px -24px rgba(0,0,0,.35), 0 2px 0 0 rgba(0,0,0,.04);
margin-top: -80px;
position: relative;
z-index: 2;
}
@media (max-width: 900px) {
.hv2-bar { grid-template-columns: 1fr; margin-top: -40px; }
.hv2-stage { height: 60vh; }
}
/* Hero v2 ↔ Core Verticals spacing fix */
.hero-v2 + section,
.hero-v2 ~ main section:first-of-type,
section.hero-v2 ~ section { /* no-op selector fallback */ }
.hero-v2 { padding-bottom: 0; margin-bottom: 0; }
.hero-v2 + section.cv-section,
.hero-v2 ~ .cv-section { padding-top: 48px; }
.cv-section { padding-top: 56px; }
/* product-media overlay polish */
.product-media .media-overlay .row { align-items: flex-end; }
/* image logo */
.mc-logo-img { padding: 0; gap: 0; }
.mc-logo-footer img { height: 56px !important; width: auto !important; filter: none !important; }
/* logo sizing */
.mc-logo-img img { height: 40px; width: auto; display: block; }
.mc-footer .mc-logo-img img { height: 44px; }
/* header-tight-override */
.mc-header.scrolled .mc-header-inner { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
/* === Alarm CTA variants === */
/* B - Marker / highlighter */
/* C - Ticker bar */
@keyframes kcSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* D - Glitch / accent bar */
@keyframes kdPulse {
0%, 100% { background: var(--accent); box-shadow: 0 0 12px rgba(167,0,0,.0); }
50% { background: #ff2b2b; box-shadow: 0 0 14px rgba(167,0,0,.7); }
}
/* === NAV VARIANTS === */
/* logo text fallback (so variants don't depend on the original PNG block) */
.mc-logo .logo-text {
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: .22em;
font-weight: 600;
color: var(--ink);
}
/* B - Editorial */
.nav-edi {
position: sticky;
top: 0;
z-index: 50;
}
.nav-edi-utility .ne-langs a.active { color: #fff; }
.nav-edi-main {
background: var(--bg);
border-bottom: 1px solid transparent;
transition: border-color .3s ease;
}
.nav-edi.scrolled .nav-edi-main { border-bottom-color: var(--hair); }
.nav-edi-inner {
display: flex;
align-items: center;
gap: 32px;
height: 72px;
}
.ne-nav {
display: flex;
align-items: center;
gap: 28px;
margin-left: auto;
margin-right: auto;
}
.ne-nav a {
font-size: 15px;
font-weight: 500;
color: var(--ink-2);
position: relative;
padding: 22px 2px;
transition: color .25s ease;
display: inline-block;
}
/* No font-weight change on hover: a heavier face is WIDER, and .ne-nav is a flex row, so
every following link slid sideways (measured: +1.3px on the hovered item, +0.6px on the
rest). The accent colour and the scaleX underline carry the hover state instead. */
.ne-nav a:hover {
color: var(--accent);
}
.ne-nav a::before {
content: '';
position: absolute;
left: 0; bottom: 14px;
width: 100%;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: right center;
transition: transform .35s cubic-bezier(.65,.05,.35,1);
}
.ne-nav a:hover::before {
transform: scaleX(1);
transform-origin: left center;
}
.ne-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 18px 12px 22px;
background: var(--accent);
border: 1.5px solid var(--accent);
font-family: var(--font-head);
font-size: 15px;
font-weight: 500;
color: #fff;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ne-cta .ne-cta-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
transition: transform .25s ease;
}
.ne-cta .ne-cta-arrow svg { width: 16px; height: 16px; }
.ne-cta:hover {
background: #8a0000;
border-color: #8a0000;
}
.ne-cta:hover .ne-cta-arrow { transform: translateX(4px); }
/* C - Numbered Index */
.nav-idx.scrolled { border-bottom-color: var(--hair); }
/* === NAV E1 - Masthead === */
/* === NAV E3 - Pill cluster === */
.nav-pill.scrolled .nav-pill-main { border-bottom-color: var(--hair); }
/* ============================================================
UNIFORM SECTION RHYTHM — equal vertical spacing between sections
============================================================ */
.cv-section,
.why-section,
.prowess-section,
.contact-why-section,
.contact-section {
padding-top: var(--pad-y) !important;
padding-bottom: var(--pad-y) !important;
}
/* Core Verticals contains internal .vertical rows — keep its outer band equal too */
.cv-section .vertical { padding-block: var(--pad-y); }
/* When the editorial/v2 hero sits above Core Verticals, keep the same gap */
.hero-v2 + section.cv-section,
.hero-v2 ~ .cv-section { padding-top: var(--pad-y) !important; }
/* The platform .container leaks pt-16/py-20; this design centers via max-width and wants no container padding. */
.container{padding:0!important;}
/* ===== data-center-infrastructure page-specific rules ===== */
/* ============================================================
Data Center & Infrastructure — landing design
Builds on mc-base.css (shared vars, nav, footer).
============================================================ */
.dc-page .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.dc-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent);
display: inline-block;
margin-bottom: 18px;
}
/* ---------------- HERO ---------------- */
/* ---------------- STATS ---------------- */
.dc-stat-big .accent { color: var(--accent); }
/* ---------------- OVERVIEW ---------------- */
.dc-overview-list { border-top: 1px solid var(--hair-strong); }
.dc-overview-item { display: grid; grid-template-columns: 80px 1fr 28px; align-items: center; gap: 24px; padding: 30px 0 30px 16px; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); position: relative; transition: padding .25s ease, background .25s ease; }
.dc-overview-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width .25s ease; }
.dc-overview-item:hover { padding-left: 28px; background: color-mix(in oklab, var(--accent) 4%, var(--bg)); }
.dc-overview-item:hover::before { width: 4px; }
.dc-overview-item .num { font-family: var(--font-mono); font-size: 15px; color: var(--accent); }
.dc-overview-item .ttl { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-card); letter-spacing: -.02em; }
.dc-overview-item .arr { color: var(--ink-3); display: inline-flex; transition: transform .25s ease, color .25s ease; }
.dc-overview-item:hover .arr { color: var(--accent); transform: translateX(4px); }
/* ---------------- SOLUTION DETAIL ---------------- */
.dc-solution-tag .n { color: var(--accent); }
/* ---------------- WHY ---------------- */
.dc-why-card .ix { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--accent); }
/* ---------------- APPROACH ---------------- */
.dc-step .ix { font-family: var(--font-head); font-weight: 300; font-size: clamp(44px, 4.5vw, 64px); letter-spacing: -.03em; color: var(--ink-3); display: block; margin-bottom: 18px; }
/* ---------------- CONTACT ---------------- */
.dc-contact-facts .row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.dc-contact-facts .k { color: var(--ink-3); }
.dc-contact-facts .v { color: var(--ink); }
/* No published page uses .dc-field today; its inputs are kept aligned with the
tenant-wide Dolgu treatment so a revival cannot resurrect the retired underline. */
.dc-field .msg { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--accent); min-height: 12px; margin-top: 6px; }
.dc-field.err input, .dc-field.err select, .dc-field.err textarea { border-color: var(--accent); background-color: rgba(167,0,0,.05); }
.dc-form-sent { display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 360px; }
.dc-form-sent h3 { font-family: var(--font-head); font-weight: 400; font-size: 26px; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.dc-form-sent p { font-family: var(--font-head); font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
/* ---------------- FAQ ---------------- */
.dc-faq { padding: var(--pad-y) 0; } /* was a flat 110px; every other band steps with the token */
.dc-faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: start; }
.dc-faq-head h2 { margin: 0 0 18px; }
.dc-faq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-strong); }
.dc-faq-item { border-bottom: 1px solid var(--hair); }
.dc-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.dc-faq-q .qt { font-family: var(--font-head); font-weight: 500; font-size: 19px; letter-spacing: -.01em; line-height: 1.3; }
.dc-faq-q .ic { font-family: var(--font-mono); font-size: 22px; font-weight: 300; color: var(--ink-3); transition: transform .25s ease, color .2s ease; }
.dc-faq-item.open .dc-faq-q .ic { transform: rotate(45deg); color: var(--accent); }
.dc-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.dc-faq-a > div { overflow: hidden; font-family: var(--font-head); font-size: 15px; line-height: 1.65; color: var(--ink-2); padding-right: 24px; }
.dc-faq-item.open .dc-faq-a { grid-template-rows: 1fr; }
.dc-faq-item.open .dc-faq-a > div { padding-bottom: 26px; }
/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1000px) {
.dc-overview-head, .dc-why-head, .dc-solution-grid, .dc-managed, .dc-contact-grid, .dc-faq-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* page-only tweaks panel */
.bf-tweaks.open { display: flex; }
.bf-tweaks .lbl { color: var(--ink-3); }
.bf-tweaks button.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.bf-tweaks .x {
margin-left: 8px;
border: 0;
background: transparent;
color: var(--ink-3);
cursor: pointer;
font-size: 14px;
letter-spacing: 0;
}
/* ===== data-center-infrastructure page-specific rules ===== */
/* ============================================================
Data Center & Infrastructure — landing design
Builds on mc-base.css (shared vars, nav, footer).
============================================================ */
/* ===== blockchain-fintech page-specific rules ===== */
/* ============================================================
Blockchain & FinTech — page-specific styles
Builds on mc-base.css; adds bespoke components.
============================================================ */
/* Page wrapper that adds top spacing to clear the editorial nav (utility 32px + main 88px) */
/* ============================ HERO (split) ============================ */
.bf-hero {
background: var(--bg);
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--hair);
}
.bf-hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 80px;
align-items: stretch;
padding: 96px 0 88px;
}
.bf-hero-left { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.bf-hero-cta-row {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.bf-hero-secondary {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-2);
border-bottom: 1px solid var(--hair-strong);
padding-bottom: 4px;
transition: color .2s ease, border-color .2s ease;
}
.bf-hero-secondary:hover { color: var(--accent); border-color: var(--accent); }
/* Hero right: stat panel (V1) */
.bf-stat-value .unit {
color: var(--accent);
font-style: italic;
font-weight: 400;
}
/* Hero right alt: schematic diagram (V2) */
.bf-schem-corner {
position: absolute;
width: 10px; height: 10px;
border: 1px solid var(--accent);
}
.bf-schem-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bf-schem-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.bf-schem-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.bf-schem-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.bf-schem-row .tag {
padding: 10px 12px;
background: var(--ink);
color: #fff;
min-width: 86px;
display: flex;
align-items: center;
justify-content: center;
}
.bf-schem-row.accent .tag { background: var(--accent); }
.bf-schem-row .body {
padding: 10px 14px;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ink);
}
.bf-schem-row .body .num { color: var(--accent); font-weight: 500; }
/* ============================ INTRO BAND ============================ */
.bf-intro-figure figcaption .ix { color: var(--accent); letter-spacing: .22em; }
.bf-intro p .em { color: var(--ink); font-weight: 500; }
.bf-intro-metric .v {
font-family: var(--font-head);
font-weight: 300;
font-size: clamp(34px, 3.6vw, 54px);
line-height: 1;
letter-spacing: -.025em;
color: var(--ink);
}
.bf-intro-metric .v .accent { color: var(--accent); font-style: italic; font-weight: 400; }
.bf-intro-metric .l {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 12px;
}
/* ============================ ENGINE (3 differentiators) ============================ */
.bf-engine .container { padding-bottom: 0; }
.bf-engine-list { margin-bottom: 0 !important; }
.bf-engine.light {
background: var(--bg);
color: var(--ink);
border-bottom: 1px solid var(--hair);
}
.bf-engine.light .bf-intro-eyebrow { color: var(--accent); }
.bf-engine .lede {
font-family: var(--font-head);
font-size: 17px;
line-height: 1.55;
color: color-mix(in oklab, currentColor 70%, transparent);
margin: 0;
max-width: 540px;
}
.bf-engine-list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid color-mix(in oklab, currentColor 18%, transparent);
}
.bf-engine-row {
display: grid;
grid-template-columns: 96px 1fr 1.6fr;
gap: 48px;
padding: 44px 0;
border-bottom: 1px solid color-mix(in oklab, currentColor 18%, transparent);
align-items: start;
}
.bf-engine-row .ix {
font-family: var(--font-head);
font-weight: 300;
font-size: 64px;
line-height: 1;
letter-spacing: -.03em;
color: var(--accent);
}
.bf-engine-row .ttl {
font-family: var(--font-head);
font-weight: 400;
font-size: var(--fs-card);
line-height: 1.15;
letter-spacing: -.015em;
color: inherit;
}
.bf-engine-row .ttl .it { font-style: italic; color: var(--accent); }
.bf-engine-row .body p {
font-family: var(--font-head);
font-size: 16px;
line-height: 1.6;
margin: 0 0 14px;
color: color-mix(in oklab, currentColor 78%, transparent);
}
.bf-engine-row .body .diff {
display: flex;
gap: 14px;
padding: 14px 18px;
border-left: 2px solid var(--accent);
background: color-mix(in oklab, currentColor 6%, transparent);
font-family: var(--font-head);
font-size: 14px;
line-height: 1.5;
color: inherit;
}
.bf-engine-row .body .diff .label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent);
/* No nowrap. The short labels this rule was written for fit anyway; a long
one did not, and forced invoicepipeline 207px wider than a 375px viewport. */
margin-top: 2px;
}
/* ============================ SOLUTIONS vs SERVICES (tabbed editorial) ============================ */
.bf-svs-head .lede {
font-family: var(--font-head);
font-size: 17px;
line-height: 1.55;
color: var(--ink-2);
margin: 16px 0 0;
max-width: 640px;
}
/* tabs */
.bf-svs-tab .ix {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
color: var(--accent);
}
.bf-svs-tab .lbl {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(28px, 3vw, 44px);
letter-spacing: -.02em;
line-height: 1;
color: currentColor;
}
.bf-svs-tab .ct {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-3);
opacity: .8;
}
.bf-svs-tab.on {
color: var(--ink);
background: var(--ink);
color: #f3efe7;
}
.bf-svs-tab.on .ct { color: rgba(243,239,231,.6); }
.bf-svs-tab.on .ix { color: var(--accent); }
.bf-svs-tab.on::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: var(--accent);
}
/* board */
@keyframes bfSvsFade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.bf-svs-aside .track {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 8px;
}
.bf-svs-aside-foot .k { color: var(--ink-3); }
.bf-svs-aside-foot .v { color: var(--ink); }
/* items list */
.bf-svs-item.on {
background: color-mix(in oklab, var(--accent) 4%, var(--bg));
}
.bf-svs-item.on::before { width: 4px; }
.bf-svs-item .num {
font-family: var(--font-mono);
font-weight: 400;
font-size: 44px;
line-height: 1;
letter-spacing: -.02em;
color: var(--ink-3);
opacity: .35;
padding-top: 6px;
transition: opacity .25s ease, color .25s ease;
}
.bf-svs-item.on .num { color: var(--accent); opacity: 1; }
.bf-svs-item .meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
}
.bf-svs-item .ttl {
font-family: var(--font-head);
font-weight: 500;
font-size: var(--fs-card);
line-height: 1.2;
letter-spacing: -.015em;
color: var(--ink);
margin: 0 0 10px;
}
.bf-svs-item .body {
font-family: var(--font-head);
font-size: 15px;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
max-width: 60ch;
}
.bf-svs-item.on .chev,
.bf-svs-item:hover .chev {
opacity: 1;
color: var(--accent);
transform: translate(0, 0);
}
@media (max-width: 920px) {
.bf-svs-tab .lbl { font-size: 28px; }
.bf-svs-item .num { font-size: 32px; }
}
/* ============================ INDUSTRY ALIGNMENT ============================ */
.bf-industry-head .lede {
font-family: var(--font-head);
font-size: 17px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
max-width: 540px;
}
.bf-industry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--hair-strong);
}
.bf-industry-card {
padding: 36px 28px 36px 28px;
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair-strong);
position: relative;
transition: background .25s ease;
}
.bf-industry-card:first-child { padding-left: 0; }
.bf-industry-card:last-child { border-right: 0; padding-right: 0; }
.bf-industry-card:hover { background: color-mix(in oklab, var(--ink) 3%, transparent); }
.bf-industry-card .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .18em;
color: var(--accent);
text-transform: uppercase;
}
.bf-industry-card h4 {
font-family: var(--font-head);
font-weight: 400;
font-size: 24px;
letter-spacing: -.012em;
line-height: 1.18;
color: var(--ink);
margin: 32px 0 16px;
}
.bf-industry-card h4 .it { font-style: italic; color: var(--accent); }
.bf-industry-card p {
font-family: var(--font-head);
font-size: 15px;
line-height: 1.6;
color: var(--ink-2);
margin: 0;
}
.bf-industry-card ul {
list-style: none;
padding: 0;
margin: 22px 0 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-3);
display: flex;
flex-direction: column;
gap: 10px;
}
.bf-industry-card ul li::before {
content: '+';
color: var(--accent);
margin-right: 10px;
}
/* ============================ PROCESS ============================ */
.bf-process-head .lede {
font-family: var(--font-head);
font-size: 17px;
line-height: 1.55;
color: var(--ink-2);
margin: 16px 0 56px;
max-width: 640px;
}
.bf-process-step .ix {
font-family: var(--font-head);
font-weight: 300;
font-size: clamp(48px, 5vw, 72px);
letter-spacing: -.03em;
line-height: 1;
color: var(--ink-3);
margin-bottom: 22px;
display: block;
}
/* ============================ COMPLIANCE BAND ============================ */
.bf-compliance .eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 10px;
}
.bf-compliance .eyebrow::before {
content: '';
width: 22px; height: 1px; background: var(--accent);
}
.bf-compliance .frames {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid color-mix(in oklab, currentColor 22%, transparent);
}
.bf-compliance .frame {
padding: 24px 24px 24px 0;
border-right: 1px solid color-mix(in oklab, currentColor 18%, transparent);
border-bottom: 1px solid color-mix(in oklab, currentColor 18%, transparent);
}
.bf-compliance .frame:nth-child(2n) { border-right: 0; padding-left: 24px; padding-right: 0; }
.bf-compliance .frame:nth-last-child(-n+2) { border-bottom: 0; }
.bf-compliance .frame .tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--accent);
}
.bf-compliance .frame .name {
font-family: var(--font-head);
font-weight: 400;
font-size: 22px;
color: var(--ink);
margin: 10px 0 6px;
}
.bf-compliance .frame .name .it { font-style: italic; color: var(--accent); }
.bf-compliance .frame p {
font-family: var(--font-head);
font-size: 14px;
line-height: 1.55;
color: var(--ink-2);
margin: 0;
}
/* ============================ CASE STUDY (placeholder) ============================ */
.bf-case-visual .badge {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: var(--bg);
border: 1px solid var(--hair-strong);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent);
margin: auto 0 18px 18px;
align-self: flex-end;
}
.bf-case-content h3 .it { font-style: italic; color: var(--accent); }
.bf-case-content .body {
font-family: var(--font-head);
font-size: 16px;
line-height: 1.6;
color: var(--ink-2);
}
/* ============================ FAQ ============================ */
.bf-faq-grid .lede {
font-family: var(--font-head);
font-size: 16px;
line-height: 1.6;
color: var(--ink-2);
margin-top: 18px;
}
.bf-faq-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--hair-strong);
}
.bf-faq-item {
border-bottom: 1px solid var(--hair);
}
.bf-faq-q {
width: 100%;
display: grid;
grid-template-columns: 56px 1fr 24px;
gap: 18px;
align-items: center;
padding: 28px 0;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font: inherit;
color: var(--ink);
}
.bf-faq-q .n {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .18em;
color: var(--accent);
}
.bf-faq-q .text {
font-family: var(--font-head);
font-size: 19px;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1.3;
color: var(--ink);
}
.bf-faq-q .icn {
font-family: var(--font-mono);
font-size: 22px;
color: var(--ink-3);
font-weight: 300;
transition: color .2s ease, transform .25s ease;
justify-self: end;
}
.bf-faq-item.open .bf-faq-q .icn { color: var(--accent); transform: rotate(45deg); }
.bf-faq-a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s ease;
}
.bf-faq-a > div {
overflow: hidden;
font-family: var(--font-head);
font-size: 15px;
line-height: 1.65;
color: var(--ink-2);
padding-left: 74px;
padding-right: 24px;
}
.bf-faq-item.open .bf-faq-a {
grid-template-rows: 1fr;
}
.bf-faq-item.open .bf-faq-a > div { padding-bottom: 28px; }
/* ============================ FINAL CTA ============================ */
.bf-final {
background: var(--accent);
color: #fff;
padding: var(--pad-y) 0;
position: relative;
overflow: hidden;
}
.bf-final-inner {
position: relative;
display: grid;
/* minmax(0,...) not 1.2fr/1fr. A bare fr track floors at min-content, so one
non-wrapping child pushes the track past its container: this band measured
795px wide inside a 312px container at 375px before the cap. Restacking the
grid does not fix that; capping the track does. */
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
row-gap: 60px;
column-gap: 60px;
align-items: end;
}
.bf-final h2 {
font-family: var(--font-head);
font-weight: 300;
font-size: var(--fs-cta);
line-height: .98;
letter-spacing: -.025em;
margin: 0;
color: #fff;
}
.bf-final h2 .it { font-style: italic; }
.bf-final .pitch {
font-family: var(--font-head);
font-size: 18px;
line-height: 1.55;
color: rgba(255,255,255,.85);
margin: 22px 0 0;
max-width: 560px;
}
.bf-final-aside {
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
}
.bf-final-cta {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 26px;
background: #fff;
color: var(--accent);
font-family: var(--font-head);
font-weight: 500;
font-size: 16px;
transition: background .2s ease, color .2s ease;
}
.bf-final-cta:hover { background: #0a0a0a; color: #fff; }
.bf-final-cta svg { width: 16px; height: 16px; }
.bf-final-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.75);
display: inline-flex;
align-items: center;
gap: 10px;
}
.bf-final-meta::before { content:''; width: 6px; height: 6px; background: #fff; }
/* ============================ ENGINEERING (Dossier) overrides ============================ */
.bf-v-engineering .bf-hero-grid { padding: 16px 0 80px; }
.bf-v-engineering .bf-engine-row { grid-template-columns: 60px 1.1fr 1.5fr; gap: 32px; }
.bf-v-engineering .bf-engine-row .ix { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--accent); padding-top: 8px; }
.bf-v-engineering .bf-process-step .ix { color: var(--accent); font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; }
/* ============================ PRESS (Newsprint / Editorial) variant ============================ */
.bf-v-press .bf-hero { background: #ffffff; border-bottom: 2px solid var(--ink); }
.bf-v-press .bf-hero-grid { padding: 72px 0 80px; gap: 64px; }
.bf-v-press .bf-kicker-row .num { color: var(--ink); }
.bf-v-press .bf-kicker-row .bar { background: var(--ink); }
.bf-v-press .bf-hero-secondary { color: var(--ink); border-color: var(--ink); }
/* press card on hero right */
.bf-press-rule.thin { height: 1px; margin: 0; }
.bf-press-stamp .k {
font-family: 'Roboto Mono', var(--font-mono);
font-size: 9px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ink-3);
}
.bf-press-stamp .v {
font-family: 'IBM Plex Sans', var(--font-head);
font-weight: 700;
font-size: 18px;
letter-spacing: -.01em;
color: var(--ink);
}
/* press section overrides — newsprint backgrounds, slab heads */
.bf-v-press .bf-intro h2,
.bf-v-press .bf-svs-head h2,
.bf-v-press .bf-industry-head h2,
.bf-v-press .bf-process-head h2,
.bf-v-press .bf-faq-grid h2,
.bf-v-press .bf-final h2,
.bf-v-press .bf-case-content h3 {
font-family: 'IBM Plex Sans', var(--font-head);
font-weight: 700;
letter-spacing: -.025em;
}
.bf-v-press .bf-intro-metric .v { font-family: 'IBM Plex Sans', var(--font-head); font-weight: 700; }
.bf-v-press .bf-engine-list { border-top: 2px solid var(--ink); }
.bf-v-press .bf-engine-row { border-bottom: 1px solid var(--ink); }
.bf-v-press .bf-engine-row .ix {
font-family: 'IBM Plex Sans', var(--font-head);
font-weight: 700;
color: var(--ink);
}
.bf-v-press .bf-engine-row .ttl { font-family: 'IBM Plex Sans', var(--font-head); font-weight: 700; }
.bf-v-press .bf-engine-row .ttl .it { color: var(--accent); }
.bf-v-press .bf-engine-row .body .diff { background: rgba(0,0,0,.04); border-left-color: var(--ink); }
.bf-v-press .bf-engine-row .body .diff .label { color: var(--ink); }
.bf-v-press .bf-svs-col li .n { font-family: 'Roboto Mono', var(--font-mono); color: var(--ink); }
.bf-v-press .bf-industry-grid { border-top: 2px solid var(--ink); }
.bf-v-press .bf-industry-card h4 .it { color: var(--accent); }
.bf-v-press .bf-industry-card .num { color: var(--ink); }
.bf-v-press .bf-process-step .ix { font-family: 'IBM Plex Sans', var(--font-head); font-weight: 700; color: var(--ink-3); }
.bf-v-press .bf-compliance .frame .name .it { color: var(--accent); }
.bf-v-press .bf-case-content h3 .it { color: var(--accent); font-style: italic; }
.bf-v-press .bf-faq-list { border-top: 2px solid var(--ink); }
.bf-v-press .bf-faq-q .text { font-family: 'IBM Plex Sans', var(--font-head); font-weight: 600; }
.bf-v-press .bf-faq-q .n { color: var(--ink); }
.bf-v-press .bf-final { background: var(--accent); }
.bf-v-press .bf-final h2 { color: #fff; }
.bf-v-press .bf-final-cta { background: var(--ink); color: #fff; border-radius: 0; }
.bf-v-press .bf-final-cta:hover { background: #fff; color: var(--ink); }
/* ============================ RESPONSIVE ============================ */
@media (max-width: 1100px) {
.bf-hero-grid { grid-template-columns: 1fr; gap: 56px; padding: 72px 0 64px; }
.bf-intro-grid, .bf-engine-head, .bf-industry-head, .bf-faq-grid, .bf-final-inner, .bf-compliance-grid, .bf-case-grid {
grid-template-columns: minmax(0, 1fr); row-gap: 32px; column-gap: 32px;
}
.bf-engine-row { grid-template-columns: 64px 1fr; gap: 24px; }
.bf-engine-row .body { grid-column: 1 / -1; padding-top: 8px; }
.bf-industry-grid { grid-template-columns: 1fr; }
.bf-industry-card { border-right: 0; padding: 28px 0; }
.bf-industry-card:first-child { padding-top: 28px; }
.bf-compliance .frames { grid-template-columns: 1fr; }
.bf-compliance .frame, .bf-compliance .frame:nth-child(2n) { padding: 20px 0; border-right: 0; border-bottom: 1px solid color-mix(in oklab, currentColor 18%, transparent); }
}
/* press white override */
/* Solutions/Services tab panes (mc.js toggles .svs-hidden) */
.svs-hidden{display:none!important;}
/* ===== about page-specific rules ===== */
/* ============================================================
Blockchain & FinTech — page-specific styles
Builds on mc-base.css; adds bespoke components.
============================================================ */
/* Page wrapper that adds top spacing to clear the editorial nav (utility 32px + main 88px) */
/* ============================ COMPLIANCE BAND ============================ */
.bf-compliance .frame .name {
font-family: var(--font-head);
font-weight: 400;
font-size: 22px;
color: #fff;
margin: 10px 0 6px;
}
.bf-compliance .frame p {
font-family: var(--font-head);
font-size: 14px;
line-height: 1.55;
color: color-mix(in oklab, #fff 70%, transparent);
margin: 0;
}
/* ============================================================
About — page-specific tweaks (builds on mc-base.css + bf-page.css)
============================================================ */
/* About uses one clean design; tame the engine "What we do" so 5 rows read well */
.about-skin .bf-engine .lede { color: var(--ink-3); }
.about-skin .bf-engine-list { border-top: 1px solid var(--hair-strong); }
.about-skin .bf-engine-row {
border-bottom: 1px solid var(--hair);
padding: 38px 0;
align-items: start;
}
.about-skin .bf-engine-row .ix {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: .18em;
color: var(--accent);
font-weight: 400;
}
.about-skin .bf-engine-row .ttl { color: var(--ink); }
.about-skin .bf-engine-row .body p { color: var(--ink-2); }
/* Why-work band stays the soft grey we use elsewhere (not pure black) */
.about-skin .bf-compliance .frame .name { color: #fff; }
.about-skin .bf-compliance .frame p { color: rgba(255,255,255,.62); }
.about-skin .bf-compliance .frames { border-top-color: rgba(255,255,255,.2); }
.about-skin .bf-compliance .frame {
border-right-color: rgba(255,255,255,.14);
border-bottom-color: rgba(255,255,255,.14);
}
/* Who-we-are figure */
.about-top-figure .cap {
position: absolute;
left: clamp(20px, 4vw, 80px);
bottom: 26px;
display: inline-flex; align-items: center; gap: 12px;
color: #fff;
font-family: var(--font-mono);
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.about-top-figure .cap .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
/* Remove eyebrow dashes on About */
.about-skin .bf-intro-eyebrow::before,
.about-skin .eyebrow::before { display: none !important; }
/* Balanced 96px top/bottom padding across all About sections */
.about-skin .bf-intro,
.about-skin .bf-engine,
.about-skin .bf-industry,
.about-skin .bf-compliance,
.about-skin .bf-final { padding-top: 96px !important; padding-bottom: 96px !important; }
/* Full-bleed hero band */
.about-skin .bf-hero-grid { padding: 18px 0 28px; gap: 40px; align-items: center; }
.about-skin .bf-hero-left { gap: 24px; }
/* Statement band (accent, no image — distinct from the dark hero) */
/* Final CTA: white background variant for About */
.about-skin .bf-final { background: #fff; color: var(--ink); border-top: 1px solid var(--hair); }
.about-skin .bf-final h2 { color: var(--ink); }
.about-skin .bf-final h2 .it { color: var(--accent); }
.about-skin .bf-final .pitch { color: var(--ink-2); }
.about-skin .bf-final-cta { background: var(--accent); color: #fff; }
.about-skin .bf-final-cta:hover { background: #0a0a0a; color: #fff; }
.about-skin .bf-final-meta { color: var(--ink-3); }
.about-skin .bf-final-meta::before { background: var(--accent); }
.about-band-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.about-band-stats .v {
font-family: var(--font-head);
font-weight: 300;
font-size: clamp(32px, 3.2vw, 48px);
letter-spacing: -.02em;
color: #fff;
line-height: 1;
}
.about-band-stats .v i { font-style: normal; opacity: .7; }
.about-band-stats .k {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,.7);
}
/* ===== digital-transformation page-specific rules ===== */
/* ============================================================
Blockchain & FinTech — page-specific styles
Builds on mc-base.css; adds bespoke components.
============================================================ */
/* Page wrapper that adds top spacing to clear the editorial nav (utility 32px + main 88px) */
.bf-v-press .bf-hero-grid { padding: 4px 0 80px; gap: 64px; }
/* ============================================================
DT SKIN — distinct "blueprint" identity for Digital Transformation
============================================================ */
/* Blueprint grid backdrop on the light sections */
.dt-skin2 .bf-hero,
.dt-skin2 .bf-intro,
.dt-skin2 .bf-svs,
.dt-skin2 .bf-process,
.dt-skin2 .bf-faq {
background-color: #fafaf8;
background-image:
linear-gradient(var(--blueprint) 1px, transparent 1px),
linear-gradient(90deg, var(--blueprint) 1px, transparent 1px);
background-size: 40px 40px;
background-position: -1px -1px;
}
/* Eyebrows become boxed blueprint tags */
.dt-skin2 .bf-intro-eyebrow,
.dt-skin2 .bf-compliance .eyebrow {
border: 1px solid var(--ink);
padding: 6px 12px;
color: var(--ink);
}
.dt-skin2 .bf-intro-eyebrow::before,
.dt-skin2 .bf-compliance .eyebrow::before { display: none; }
/* Hero: tighter, bigger, monospace kicker chip */
.dt-skin2 .bf-kicker-row .bar { display: none; }
/* Engine: instead of full-width rows, three bordered blueprint cards */
.dt-skin2 .bf-engine-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--ink);
border-left: 1px solid var(--ink);
}
.dt-skin2 .bf-engine-row {
display: block;
grid-template-columns: none;
gap: 0;
padding: 36px 30px 40px;
border-right: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
border-top: 0;
position: relative;
}
.dt-skin2 .bf-engine-row .ix {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .2em;
color: var(--accent);
display: block;
margin-bottom: 28px;
}
.dt-skin2 .bf-engine-row .ttl {
font-size: var(--fs-card);
line-height: 1.12;
margin-bottom: 18px;
display: block;
}
.dt-skin2 .bf-engine-row .body { max-width: none; }
.dt-skin2 .bf-engine-row:hover { background: #faf7f4; }
@media (max-width: 900px) {
.dt-skin2 .bf-engine-list { grid-template-columns: 1fr; }
}
/* Section headings get a red index rule on the left */
/* Industry cards: blueprint corners + outlined */
.dt-skin2 .bf-industry-grid {
border: 1px solid var(--ink);
border-bottom: 0;
}
.dt-skin2 .bf-industry-card {
border-right: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 36px 28px;
}
.dt-skin2 .bf-industry-card:first-child { padding-left: 28px; }
.dt-skin2 .bf-industry-card:hover { background: #faf7f4; }
/* Process steps: blueprint numbered tiles */
.dt-skin2 .bf-process-step .ix {
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: .16em;
color: var(--accent);
}
/* Compliance stays gray but gets the blueprint frame */
.dt-skin2 .bf-compliance .frames { border: 1px solid var(--ink); border-bottom: 0; }
.dt-skin2 .bf-compliance .frame {
border-right: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 22px 22px;
}
.dt-skin2 .bf-compliance .frame:nth-child(2n) { padding-left: 22px; padding-right: 22px; }
/* ============================================================
DT SKIN 2 — "editorial dossier" alternative (no grid, dark engine)
============================================================ */
/* drop the blueprint grid → solid warm panels */
.dt-skin2 .bf-hero,
.dt-skin2 .bf-intro,
.dt-skin2 .bf-svs,
.dt-skin2 .bf-process,
.dt-skin2 .bf-faq {
background-image: none;
background-color: var(--bg);
}
/* eyebrows: solid red tag instead of outlined box */
.dt-skin2 .bf-intro-eyebrow,
.dt-skin2 .bf-compliance .eyebrow {
border: 0;
background: var(--accent);
color: #fff;
padding: 6px 12px;
}
/* hero headline: heavier, editorial */
/* Engine: full-bleed DARK band with large index cards */
.dt-skin2 .bf-engine .lede { color: rgba(255,255,255,.6); }
.dt-skin2 .bf-engine-list {
border-top: 1px solid rgba(255,255,255,.16);
border-left: 0;
}
.dt-skin2 .bf-engine-row {
display: grid;
grid-template-columns: 96px 1fr 1.6fr;
gap: 48px;
border-right: 0;
border-bottom: 1px solid rgba(255,255,255,.16);
padding: 44px 0;
}
.dt-skin2 .bf-engine-row:hover { background: transparent; }
.dt-skin2 .bf-engine-row .ix {
font-family: var(--font-head);
font-weight: 300;
font-size: 56px;
letter-spacing: -.03em;
color: var(--accent);
margin-bottom: 0;
}
.dt-skin2 .bf-engine-row .ttl { font-size: var(--fs-card); color: #fff; margin-bottom: 0; }
.dt-skin2 .bf-engine-row .body .diff {
background: rgba(255,255,255,.06);
border-left: 2px solid var(--accent);
}
.dt-skin2 .bf-engine-row .body .diff .label { color: var(--accent); }
@media (max-width: 900px) {
.dt-skin2 .bf-engine-row { grid-template-columns: 64px 1fr; gap: 24px; }
.dt-skin2 .bf-engine-row .body { grid-column: 1 / -1; }
}
/* remove blueprint outlines on industry/process/compliance → hairline only */
.dt-skin2 .bf-industry-grid { border: 0; border-top: 1px solid var(--hair-strong); }
.dt-skin2 .bf-industry-card { border-right: 1px solid var(--hair); border-bottom: 0; }
.dt-skin2 .bf-industry-card:last-child { border-right: 0; }
.dt-skin2 .bf-compliance .frames { border: 0; border-top: 1px solid rgba(255,255,255,.18); }
.dt-skin2 .bf-compliance .frame {
border-right: 1px solid rgba(255,255,255,.14);
border-bottom: 1px solid rgba(255,255,255,.14);
}
.dt-skin2 .bf-compliance .frame .name { color:#fff; }
.dt-skin2 .bf-compliance .frame p { color: rgba(255,255,255,.62); }
/* section heading red rule stays, but thicker */
/* ============================================================
DT SKIN 3 — "soft editorial" (airy, oversized type, hairlines)
============================================================ */
.dt-skin3 .bf-hero,
.dt-skin3 .bf-intro,
.dt-skin3 .bf-svs,
.dt-skin3 .bf-engine,
.dt-skin3 .bf-process,
.dt-skin3 .bf-faq,
.dt-skin3 .bf-industry {
background-image: none;
background-color: var(--bg) !important;
color: var(--ink);
}
/* generous breathing room */
.dt-skin3 .bf-process-head .lede { margin-bottom: 40px; }
/* eyebrow: minimal red text + dot, no box */
.dt-skin3 .bf-intro-eyebrow,
.dt-skin3 .bf-compliance .eyebrow {
border: 0;
background: transparent;
color: var(--accent);
padding: 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 400;
display: inline-flex;
align-items: center;
gap: 10px;
}
.dt-skin3 .bf-intro-eyebrow::before,
.dt-skin3 .bf-compliance .eyebrow::before {
display: none;
content: '';
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
}
/* hero: very large, thin */
.dt-skin3 .bf-kicker-row .bar { display: inline-block; }
/* section headings: oversized thin, no left rule */
/* engine: airy single column, giant outline numerals */
.dt-skin3 .bf-engine .lede { color: var(--ink-3); }
.dt-skin3 .bf-engine-list { border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); display: grid; grid-template-columns: repeat(3, 1fr); }
.dt-skin3 .bf-engine-row {
display: flex;
flex-direction: column;
grid-template-columns: none;
gap: 0;
border: 0;
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
padding: 30px 26px 32px;
align-items: start;
position: relative;
overflow: hidden;
}
.dt-skin3 .bf-engine-row::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
}
.dt-skin3 .bf-engine-row:hover { background: transparent; }
.dt-skin3 .bf-engine-row .ix {
position: relative;
z-index: 1;
display: inline-grid;
place-items: center;
width: 40px; height: 40px;
border: 1px solid var(--accent);
border-radius: 50%;
font-family: var(--font-mono);
font-weight: 400;
font-size: 13px;
line-height: 1;
letter-spacing: 0;
color: var(--accent);
background: var(--bg);
-webkit-text-stroke: 0;
text-stroke: 0;
margin: 0 0 16px;
pointer-events: none;
}
.dt-skin3 .bf-engine-row .ttl,
.dt-skin3 .bf-engine-row .body { position: relative; z-index: 1; }
.dt-skin3 .bf-engine-row .ttl {
font-weight: 400;
font-size: var(--fs-card);
letter-spacing: -.01em;
color: var(--ink);
margin: 0 0 14px;
display: block;
line-height: 1.2;
}
.dt-skin3 .bf-engine-row .body { max-width: none; display: flex; flex-direction: column; flex: 1; }
.dt-skin3 .bf-engine-row .body p { font-size: 15.5px; line-height: 1.6; margin: 0 0 14px; }
.dt-skin3 .bf-engine-row .body .diff {
margin-top: auto;
background: #f6f4ef;
border-left: 2px solid var(--accent);
flex-direction: column;
gap: 6px;
padding: 13px 15px;
font-size: 13.5px;
}
.dt-skin3 .bf-engine-row .body .diff .label { color: var(--accent); }
@media (max-width: 900px) {
.dt-skin3 .bf-engine-list { grid-template-columns: 1fr; }
.dt-skin3 .bf-engine-row { gap: 18px; }
}
/* industry / process: clean hairlines, no boxes */
.dt-skin3 .bf-industry-grid { border: 0; border-top: 1px solid var(--hair); }
.dt-skin3 .bf-industry-card { border-right: 1px solid var(--hair); border-bottom: 0; }
.dt-skin3 .bf-industry-card:last-child { border-right: 0; }
.dt-skin3 .bf-industry-card:hover { background: #faf8f4; }
.dt-skin3 .bf-process-step .ix {
font-family: var(--font-head);
font-weight: 300;
font-size: clamp(48px,5vw,72px);
color: var(--ink-3);
letter-spacing: -.03em;
}
/* compliance: keep light grey, airy frames */
.dt-skin3 .bf-compliance .frames { border: 0; border-top: 1px solid var(--hair-strong); }
.dt-skin3 .bf-compliance .frame {
border-right: 1px solid var(--hair);
border-bottom: 1px solid var(--hair);
}
.dt-skin3 .bf-compliance .frame .name { color: var(--ink); }
.dt-skin3 .bf-industry-card:hover .bf-ind-img img { filter: grayscale(.3) contrast(1.05); transform: scale(1.03); }
.dt-skin3 .bf-hero { border-bottom: 0 !important; }
.bf-banner-sticker .mark { display: none; }
/* ===== Primary nav mega-menu (hover panels grouping sub-services) ===== */
.ne-nav-item{position:relative;display:inline-flex;align-items:center;}
.ne-nav-item:hover>.ne-mega,.ne-nav-item:focus-within>.ne-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
.ne-mega a.ne-mega-link{display:flex;flex-direction:column;gap:3px;padding:11px 16px;text-decoration:none;border-left:2px solid transparent;transition:background .14s ease,border-color .14s ease;}
.ne-mega a.ne-mega-link:hover{background:#faf6f5;border-left-color:var(--accent,#a70000);}
.ne-mega .ne-mega-t{display:block;font-family:var(--font-head);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.01em;}
.ne-mega a.ne-mega-link:hover .ne-mega-t{color:var(--accent,#a70000);}
/* ===== Mobile nav (hamburger + slide-in drawer) ===== */
.ne-burger{display:none;background:none;border:0;padding:8px;margin-left:auto;cursor:pointer;flex-direction:column;gap:5px;}
.ne-burger span{display:block;width:24px;height:2px;background:#111;transition:transform .2s ease;}
body.no-scroll{overflow:hidden;}
.ne-drawer{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:1000;}
.ne-drawer.open{opacity:1;visibility:visible;}
.ne-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,86vw);background:#fff;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.ne-drawer.open .ne-drawer-panel{transform:translateX(0);}
.ne-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--hair,#eee);}
.ne-drawer-title{font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.ne-drawer-close{background:none;border:0;font-size:30px;line-height:1;cursor:pointer;color:#111;}
.ne-drawer-nav{padding:6px 0 24px;}
.ne-drawer-group{border-bottom:1px solid #f3f3f3;}
.ne-drawer-link{display:block;padding:15px 22px 8px;font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;}
.ne-drawer-subs{padding:0 22px 14px;display:flex;flex-direction:column;}
.ne-drawer-sub{padding:8px 0 8px 14px;font-size:14px;color:var(--ink-3);text-decoration:none;border-left:2px solid var(--hair);}
.ne-drawer-sub:active,.ne-drawer-sub:hover{color:var(--accent,#a70000);border-left-color:var(--accent,#a70000);}
.ne-drawer-cta{display:block;margin:18px 22px 0;padding:15px;text-align:center;background:var(--accent,#a70000);color:#fff;text-decoration:none;font-weight:600;font-family:var(--font-head);}
@media (max-width:980px){
.ne-nav{display:none!important;}
.nav-edi-main .ne-cta{display:none!important;}
.ne-burger{display:flex!important;}
}
/* ================= Contact section fixes + mc-globe (2026-07-29) ================= */
/* The section sets `color` on ITSELF and expects the heading to inherit, but the platform's
Tailwind base layer colors `h2` DIRECTLY — and inheritance never beats a direct rule, at any
specificity. Hence an explicit rule rather than a specificity bump. */
.contact-section h2{ color:#fff; }
/* Honeypot + the schema bridge field: real inputs the runtime posts, kept out of sight and out
of the tab order. (Do NOT use display:none — some bots skip hidden fields, which defeats it.) */
.form .hp{ position:absolute!important; left:-9999px!important; top:auto!important;
width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
/* Privacy notice under the submit row (GDPR Art.13 / revFADP Art.19 information duty). */
.form .form-privacy{ font-family:var(--font-mono); font-size:11px; line-height:1.6;
letter-spacing:.04em; color:var(--ink-3); margin-top:18px; }
.form .form-privacy a{ font:inherit; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; }
.form .form-privacy a:hover{ color:var(--accent); }
/* Eyebrow now sits ABOVE the two-column grid so the heading and the form card share a top edge. */
/* Vertical rhythm of the contact row: the heading's top meets the card's top and the globe's
bottom meets the card's bottom. Done with the grid rather than measured offsets — the column
STRETCHES to the row height and the globe takes the leftover space, so it holds at any width.
The globe box need not stay square: the module draws R = min(cw,ch) * radiusFactor and centres
the sphere, so a wide-but-short box is fine.
min-height is load-bearing: once the grid stacks (one column) nothing stretches the column any
more, and a flex:1 box with no content would collapse to ZERO — the globe would vanish. */
.contact-wrap{ align-items:stretch; }
.contact-wrap > div{ display:flex; flex-direction:column; }
.contact-wrap > div > h2{ margin-top:0; }
.contact-wrap .mc-globe{ flex:1 1 auto; min-height:min(90vw,360px); width:100%; max-width:600px;
aspect-ratio:auto; margin:0 auto; }
/* ---- MC-GLOBE ---- */
.mc-globe{ position:relative; width:min(90vw,360px); aspect-ratio:1/1; }
.mcg-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.mcg-overlay{ position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:3; }
.mcg-badge{ position:absolute; transform:translate(-50%,-50%);
display:flex; align-items:center; gap:8px; padding:6px 11px;
background:var(--mcg-badge-bg); border:1px solid var(--mcg-badge-border); border-radius:9px;
box-shadow:0 8px 22px rgba(0,0,0,.28); white-space:nowrap;
font:700 12px ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--mcg-badge-text);
transition:opacity .25s ease; will-change:left,top,opacity; }
.mcg-badge .lbl{ font-weight:700; letter-spacing:.01em; }
.mcg-dot{ width:7px; height:7px; border-radius:50%; background:var(--mcg-accent);
box-shadow:0 0 0 0 var(--mcg-accent-glow); animation:mcgpulse 1.6s infinite; }
.mcg-sep{ width:1px; height:14px; background:var(--mcg-sep); }
.mcg-sub{ color:var(--mcg-badge-sub); font-weight:600; }
@keyframes mcgpulse{
0%{ box-shadow:0 0 0 0 var(--mcg-accent-glow) }
70%{ box-shadow:0 0 0 7px transparent }
100%{ box-shadow:0 0 0 0 transparent } }
/* ================= Phase-1 content rebuild — shared components (2026-08-01) =================
New section types the 17-page package needs that the design export did not ship. Tokens only —
every colour/size comes from the :root custom properties so these inherit the design language. */
/* Breadcrumb (C3) */
/* Homepage area columns (C6) — five aligned rows, bottom-pinned CTA. */
/* Offer trio modifier (C8): lighter chrome than a product card. */
.product-grid .product.plain{ border:0; background:none; border-top:1px solid var(--hair-strong);
border-radius:0; padding-top:20px; }
/* 2 cards centred at 3-up width (C11). */
.product-grid.pair{ grid-template-columns:repeat(3,1fr); }
.product-grid.pair > *:first-child{ grid-column:1; }
/* Bottom-pin the CTA row inside card copy (C11). */
.product-copy{ display:flex; flex-direction:column; }
.product-copy .product-cta-row{ margin-top:auto; }
/* Body-copy measure (C9). .lede stays the intro voice; this is the reading voice. */
.mc-prose{ max-width:72ch; color:var(--ink-2); }
.mc-prose p{ margin:0 0 16px; line-height:1.6; }
.mc-prose ul,.mc-prose ol{ margin:0 0 16px 20px; line-height:1.6; }
/* Disqualification block (C14): distinct tone, deliberately NO accent, NO icons. */
.mc-disqual{ background:var(--bg-soft); border-top:1px solid var(--hair-strong);
border-bottom:1px solid var(--hair-strong); padding:40px 32px; margin:24px 0; }
.mc-disqual .mc-prose{ max-width:66ch; }
.mc-disqual ul{ list-style:none; padding:0; margin:0; }
.mc-disqual li{ padding:12px 0; border-bottom:1px solid var(--hair); color:var(--ink-2); line-height:1.55; }
.mc-disqual li:last-child{ border-bottom:0; }
/* Disclosure/accordion (C12/C13) — native details/summary: keyboard-correct without ARIA,
deep-linkable via id, prints expanded when open. */
.mc-disc{ border-bottom:1px solid var(--hair); }
.mc-disc summary.mc-disc-q{ display:flex; align-items:baseline; justify-content:space-between;
gap:16px; cursor:pointer; list-style:none; padding:18px 0; font-weight:500; color:var(--ink);
font-size:17px; }
.mc-disc summary.mc-disc-q::-webkit-details-marker{ display:none; }
.mc-disc summary.mc-disc-q:hover{ color:var(--accent); }
.mc-disc .icn{ font-family:var(--font-mono); color:var(--ink-3); flex:0 0 auto;
transition:transform .25s ease; }
.mc-disc[open] .icn{ transform:rotate(45deg); color:var(--accent); }
.mc-disc-a{ padding:0 0 20px; color:var(--ink-2); line-height:1.6; max-width:72ch; }
.mc-disc-a p{ margin:0 0 12px; }
/* Responsive table pair (C21): author BOTH; table >1024px, definition list below. */
.mc-table{ width:100%; border-collapse:collapse; font-size:15px; }
.mc-table th{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-3); text-align:left; font-weight:400;
padding:12px 16px 12px 0; border-bottom:1px solid var(--hair-strong); }
.mc-table td{ padding:16px 16px 16px 0; border-bottom:1px solid var(--hair); color:var(--ink-2);
vertical-align:top; line-height:1.55; }
.mc-dl{ display:none; }
.mc-dl dt{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-3); margin-top:20px; }
.mc-dl dd{ margin:6px 0 0; color:var(--ink-2); border-bottom:1px solid var(--hair);
padding-bottom:16px; line-height:1.55; }
@media(max-width:1024px){ .mc-table{ display:none; } .mc-dl{ display:block; } }
/* Status notice (C22): a full-width line, not a badge, not an error colour. */
.mc-notice{ display:block; width:100%; padding:14px 18px; margin:16px 0 0;
background:var(--bg-soft); border-left:2px solid var(--hair-strong); font-size:15px;
color:var(--ink-2); }
/* Closing-strip helpers (C17). */
.mc-partof{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.16em;
text-transform:uppercase; color:var(--ink-3); margin-top:24px; }
/* Contact-form arrival line (C23). */
.mc-arrival{ font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.1em;
text-transform:uppercase; color:var(--accent); padding-bottom:8px; }
/* Visible consent row — for AFTER the tenant schema rename; unused until then. */
/* ---- Phase-1 layout pass (2026-08-02) ---- */
/* Five flat nav links are wider than the old four: tighten below 1440px so nothing wraps. */
@media (min-width:1024px) and (max-width:1439px){
.ne-nav{ gap:16px; }
.ne-nav a{ font-size:14px; }
}
/* Form helper lines under contact fields (pack copy had no styled home). */
.form .mc-field-help{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
color:var(--ink-3); margin:6px 0 0; }
/* In-place submission confirmation: revealed on the red band, so it carries the card's white. */
.contact-wrap .dc-form-sent{ background:#fff; padding:40px 32px; }
/* ===== Homepage redesign — added 2026-08-15 =====
Rules for components introduced by the new homepage that siteCss did not have.
Source: content/prototype/Minimal_Code_Homepage_fixed.html (Claude Design export).
Classes: hxa-card, hxa-head, hxa-name, hxa-arrow, hxa-for, hxa-prod, hxa-plink, hxa-parrow, mc-timeline, mc-proof-head, mc-proof-quote, mc-offer-grid, mc-offer, faq-fullwidth, mc-contact-grid, mc-form-card, mc-form-grid */
.hxa-card { transition: background 200ms ease; }
.hxa-card:hover { background: #fafafa; }
.hxa-name, .hxa-plink { color: #0a0a0a; }
.hxa-for { color: #6b6b6b; }
.hxa-arrow { color: #0a0a0a; transition: transform 200ms ease, color 200ms ease; }
.hxa-head:hover { text-decoration: none; }
.hxa-head:hover .hxa-name { color: #a70000; }
.hxa-head:hover .hxa-arrow { color: #a70000; transform: translate(3px,-3px); }
.hxa-prod { text-decoration: none; display: block; }
.hxa-prod:hover { text-decoration: none; }
.hxa-prod:hover .hxa-plink { color: #a70000; }
.hxa-prod:hover .hxa-parrow { color: #a70000; transform: translateX(3px); }
.hxa-parrow { color: #a0a0a0; transition: transform 200ms ease, color 200ms ease; margin-left: auto; flex: 0 0 auto; }
.faq-fullwidth .dc-faq-grid { display: block; }
.faq-fullwidth .dc-faq-head { margin-bottom: 28px; }
/* FIX 09 — heading kept in the document outline but not shown.
Was: display:none, which removed the section's only heading from the
accessibility tree and left an empty in the outline. */
.faq-fullwidth .dc-faq-head h2 {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 1000px) {
.mc-proof-head { grid-template-columns: 1fr !important; gap: 28px !important; }
.mc-offer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.mc-offer-grid > .mc-offer { grid-row: auto !important; display: block !important; }
.mc-timeline { grid-template-columns: repeat(2,1fr) !important; column-gap: 32px !important; row-gap: 44px !important; }
}
@media (max-width: 620px) {
.mc-timeline { grid-template-columns: 1fr !important; row-gap: 40px !important; }
}
@media (max-width: 560px) {
.mc-proof-quote { font-size: 28px !important; }
/* grid items default to min-width:auto, so a long unbreakable string
(the registered address, the mono email) can push a track past the
container's max-width. */
}
/* ===== Homepage contact band — Sayfalar-identical form treatment (2026-08-16) =====
The homepage #contact section shipped on 2026-08-15 as a MOCK: no