/* Dignisys website styles (app/styles/01..12 of the Next project). Fonts: next/font/local there, @font-face here. */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --font-geist: "Geist"; --font-geist-mono: "Geist Mono"; }

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--navy: #0a1a33;
	--navy-2: #102446;
	--navy-3: #173563;
	--ink: #0a1a33;
	--text: #34405a;
	--muted: #5a6680;
	--paper: #f4f5f7;
	--white: #ffffff;
	--tint: #eaedf2;
	--line: #dbe0e8;
	--line-2: #c9d0db;
	--red: #c8121a;
	--red-hover: #a90e15;
	--red-soft: #ff6b70;
	--on-navy: #ffffff;
	--on-navy-muted: #a8b4c9;
	--navy-line: rgba(255, 255, 255, 0.12);
	--focus: #1d5fd1;

	--font: var(--font-geist), "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: var(--font-geist-mono), "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--gutter: clamp(20px, 4vw, 56px);
	--max: 1360px;
	--header: 76px;
	--r-sm: 12px;
	--r-md: 20px;
	--r-lg: 28px;
	--r-xl: clamp(24px, 3vw, 44px);
	--sec: clamp(88px, 10vw, 160px);
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--shadow: 0 1px 2px rgba(10, 26, 51, 0.04), 0 12px 32px -12px rgba(10, 26, 51, 0.14);
	--shadow-lg: 0 2px 4px rgba(10, 26, 51, 0.04), 0 32px 64px -24px rgba(10, 26, 51, 0.28);
}

/* 2. Base ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
address { font-style: normal; }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
::selection { background: var(--navy); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
#main:focus { outline: none; }
.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
	position: fixed; left: 16px; top: 12px; z-index: 1000;
	padding: 12px 18px; background: var(--navy); color: #fff; border-radius: 999px;
	font-weight: 500; transform: translateY(-160%); transition: transform 0.25s var(--ease);
}
.skip:focus { transform: none; }
.ico { width: 20px; height: 20px; flex: none; }
.muted { color: var(--muted); }

/* 3. Type ------------------------------------------------------------------ */
.display {
	font-size: clamp(2.75rem, 1.1rem + 6vw, 7rem);
	line-height: 0.98;
	letter-spacing: -0.048em;
	font-weight: 600;
	color: var(--ink);
	text-wrap: balance;
}
.display--page { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5.4rem); line-height: 1; letter-spacing: -0.045em; }
.display--article { font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -0.04em; }
.display em, .h2 em, .cta__title em {
	font-style: normal;
	background: linear-gradient(var(--red), var(--red)) no-repeat 0 94% / 100% 0.075em;
	padding-bottom: 0.02em;
}
.dot { color: var(--red); }
.h2 {
	font-size: clamp(2rem, 1.1rem + 2.8vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.038em;
	max-width: 20ch;
	text-wrap: balance;
}
.h3 { font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; }
.lede { font-size: clamp(1.075rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--text); max-width: 54ch; text-wrap: pretty; }
.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--mono); font-size: 12.5px; font-weight: 500;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--red); border-radius: 2px; }
.pill {
	display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
	border: 1px solid var(--line-2); border-radius: 999px;
	font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap;
}

/* 4. Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(780px + var(--gutter) * 2); }
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(48px, 6vw, 96px); }
.tone-tint { background: var(--tint); }
.tone-white { background: var(--white); }
.sec-head { display: grid; gap: 20px; align-content: start; }
.sec-head .lede { color: var(--muted); }
.sec-head--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; column-gap: 64px; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head--wide .eyebrow { grid-column: 1 / -1; }
.sec-top { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-top .sec-head { max-width: 760px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* 5. Buttons --------------------------------------------------------------- */
.btn {
	--bg: var(--red); --fg: #fff; --ib: rgba(255, 255, 255, 0.16);
	position: relative; display: inline-flex; align-items: center; gap: 14px;
	height: 54px; padding: 0 7px 0 24px; border-radius: 999px; border: 1px solid transparent;
	background: var(--bg); color: var(--fg);
	font-size: 15.5px; font-weight: 550; letter-spacing: -0.005em; white-space: nowrap;
	transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease);
	will-change: transform;
}
.btn__ico {
	display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--ib); overflow: hidden; position: relative;
}
.btn__ico .ico { width: 18px; height: 18px; transition: transform 0.45s var(--ease); }
.btn:hover .btn__ico .ico { transform: translateX(3px); }
.btn--primary:hover { --bg: var(--red-hover); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --ib: var(--navy); border-color: var(--line-2); }
.btn--ghost .btn__ico { color: #fff; }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { --bg: #fff; --fg: var(--navy); --ib: var(--navy); }
.btn--light .btn__ico { color: #fff; }
.btn--light:hover { --bg: #eef1f6; }
.btn__ico--wa { order: -1; margin-left: -16px; background: transparent; width: 32px; }
.btn--light .btn__ico--wa, .btn--ghost .btn__ico--wa { color: #1fa855; background: transparent; }
.btn--ghost:has(.btn__ico--wa) { padding: 0 24px; }
.btn--light:has(.btn__ico--wa) { padding: 0 24px; }
.btn--link {
	--bg: transparent; --fg: var(--ink); height: auto; padding: 6px 0; gap: 10px; border: 0;
	background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
	background-size: 100% 1px; background-position: 0 100%; border-radius: 0;
	transition: background-size 0.5s var(--ease);
}
.btn--link .ico { width: 18px; height: 18px; transition: transform 0.45s var(--ease); }
.btn--link:hover { background-size: 0% 1px; background-position: 100% 100%; }
.btn--link:hover .ico { transform: translateX(4px); }
.icon-btn {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line-2); color: #1fa855; transition: border-color 0.3s, background-color 0.3s;
}
.icon-btn:hover { border-color: var(--ink); background: #fff; }
.icon-btn .ico { width: 20px; height: 20px; }
.icon-btn--dark { border-color: var(--navy-line); color: #fff; }
.icon-btn--dark:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.circle-link {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	border: 1px solid var(--line-2); color: var(--ink);
	transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.5s var(--ease);
}
.circle-link:hover { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }

/* 6. Header ---------------------------------------------------------------- */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header);
	transition: transform 0.5s var(--ease), background-color 0.35s, box-shadow 0.35s;
}
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(244, 245, 247, 0.78);
	-webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
	opacity: 0; transition: opacity 0.35s;
	border-bottom: 1px solid rgba(10, 26, 51, 0.08);
}
.site-header.is-scrolled::before, .site-header.is-open::before, .site-header.mega-open::before { opacity: 1; }
.site-header.mega-open::before { background: #fff; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__bar { height: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header__brand { display: flex; align-items: center; color: var(--navy); }
.logo { display: inline-flex; color: inherit; }
.logo svg { width: 132px; height: auto; margin-block: -8px; }
.logo--light { color: #fff; }
.logo--light svg { width: 150px; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
	display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
	font-size: 15px; font-weight: 500; color: var(--ink); background: none; border: 0;
	transition: background-color 0.25s;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { background: rgba(10, 26, 51, 0.06); }
.nav__link[aria-current="page"] { background: rgba(10, 26, 51, 0.06); }
.ico--chev { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.nav__trigger[aria-expanded="true"] .ico--chev { transform: rotate(180deg); }
.site-header__actions { display: flex; align-items: center; gap: 10px; }
.site-header__actions .btn { height: 46px; font-size: 14.5px; padding-left: 20px; padding-right: 5px; }
.site-header__actions .btn__ico { width: 36px; height: 36px; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; place-items: center; }
.menu-btn__lines { position: relative; width: 18px; height: 10px; }
.menu-btn__lines i { position: absolute; left: 0; right: 0; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform 0.45s var(--ease), top 0.45s var(--ease); }
.menu-btn__lines i:first-child { top: 0; }
.menu-btn__lines i:last-child { top: 8.4px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child { top: 4.2px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child { top: 4.2px; transform: rotate(-45deg); }

.mega {
	position: absolute; left: 0; right: 0; top: var(--header);
	background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(10, 26, 51, 0.3);
	opacity: 0; transform: translateY(-8px); transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
}
.mega.is-open { opacity: 1; transform: none; }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr); gap: 40px; padding-block: 36px 44px; }
.mega__head { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mega__col a { display: grid; gap: 2px; padding: 12px 12px; margin-inline: -12px; border-radius: 12px; transition: background-color 0.2s; }
.mega__col a:hover { background: var(--paper); }
.mega__name { font-weight: 550; color: var(--ink); font-size: 15.5px; }
.mega__line { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mega__card { background: var(--navy); color: var(--on-navy-muted); border-radius: var(--r-md); padding: 28px; display: grid; gap: 14px; align-content: start; font-size: 14.5px; }
.mega__cardt { color: #fff; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.mega__card .btn { justify-self: start; height: 48px; margin-top: 6px; }
.mega__card .btn__ico { width: 36px; height: 36px; }
.mega__all { display: inline-flex; gap: 8px; align-items: center; color: #fff; font-weight: 500; margin-top: 4px; }
.mega__all .ico { width: 16px; }

.drawer {
	position: fixed; inset: 0; z-index: 90; background: var(--paper);
	padding: calc(var(--header) + 12px) var(--gutter) 32px; overflow-y: auto;
	opacity: 0; transition: opacity 0.35s var(--ease);
}
.drawer.is-open { opacity: 1; }
.drawer__inner { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__link, .drawer__group summary {
	display: flex; justify-content: space-between; align-items: center; padding: 18px 0;
	font-size: 1.75rem; font-weight: 550; letter-spacing: -0.03em; color: var(--ink);
}
.drawer__group summary .ico { width: 24px; height: 24px; transition: transform 0.4s var(--ease); }
.drawer__group[open] summary .ico { transform: rotate(45deg); }
.drawer__head { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px; }
.drawer__group ul { display: grid; margin-bottom: 12px; }
.drawer__group ul a { display: block; padding: 8px 0; font-size: 1.05rem; color: var(--ink); }
.drawer__all { display: inline-block; padding: 8px 0 20px; font-weight: 550; color: var(--red); }
.drawer__foot { display: grid; gap: 12px; }
.drawer__foot .btn { justify-content: space-between; }
.drawer__foot .btn--ghost { justify-content: center; }

/* 7. Sections -------------------------------------------------------------- */

/* Hero */
.hero { padding-top: calc(var(--header) + clamp(48px, 8vw, 120px)); }
.hero__eyebrow { margin-bottom: 28px; }
.hero__title { max-width: 15.5ch; }
.hero__row { display: flex; justify-content: space-between; align-items: end; gap: 32px 64px; margin-top: clamp(32px, 4vw, 56px); flex-wrap: wrap; }
.hero__sub { max-width: 44ch; }
.hero__media { margin-top: clamp(48px, 6vw, 88px); }
.hero__frame {
	--inset: var(--gutter);
	position: relative; height: clamp(420px, 62vw, 860px); overflow: hidden;
	clip-path: inset(0 max(var(--inset), calc((100vw - var(--max)) / 2 - 0px)) round var(--r-lg));
	will-change: clip-path;
}
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 50%; }
.hero__note {
	position: absolute; left: max(calc(var(--gutter) + 28px), calc((100vw - var(--max)) / 2 + 28px)); bottom: 28px;
	display: flex; gap: 14px; align-items: flex-start; max-width: 360px; padding: 18px 20px; border-radius: 18px;
	background: rgba(10, 26, 51, 0.62); color: #dfe6f1; font-size: 14.5px; line-height: 1.5;
	-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero__note strong { color: #fff; font-weight: 600; }
.hero__pulse { position: relative; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--red-soft); flex: none; }
.hero__pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--red-soft); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* Page hero */
.phero { padding-top: calc(var(--header) + clamp(40px, 6vw, 96px)); padding-bottom: clamp(56px, 7vw, 112px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
.phero--plain .phero__grid, .phero--wide .phero__grid { grid-template-columns: minmax(0, 1fr); }
.phero--plain { border-bottom: 1px solid var(--line); }
.phero__text { display: grid; gap: 24px; justify-items: start; }
.phero__text .display { max-width: 18ch; }
.phero--plain .display { max-width: 22ch; }
.phero__text .actions { margin-top: 8px; }
.phero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint); }
.phero--wide .phero__media { aspect-ratio: 21 / 9; margin-top: clamp(24px, 3vw, 48px); }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { transition: color 0.2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* Marquee */
.marquee { border-block: 1px solid var(--line); padding-block: 28px 32px; overflow: hidden; }
.marquee__head { margin-bottom: 18px; }
.marquee__label { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.marquee__track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__inner { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__inner { animation-play-state: paused; }
.marquee__list { display: flex; align-items: center; }
.marquee__list li { display: flex; align-items: center; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); font-weight: 550; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.marquee__list li::after { content: ""; width: 8px; height: 8px; margin-inline: clamp(24px, 3vw, 48px); border-radius: 2px; background: var(--red); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Statement */
.statement__wrap { display: grid; gap: 32px; justify-items: start; }
.statement__text {
	font-size: clamp(1.85rem, 1rem + 3vw, 4rem); line-height: 1.12; letter-spacing: -0.035em; font-weight: 550;
	color: var(--ink); max-width: 26ch; text-wrap: balance;
}
.statement__text em { font-style: normal; color: var(--red); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 16px; }
.bento__cell {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
	padding: clamp(24px, 2.4vw, 36px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line);
	overflow: hidden; isolation: isolate; min-height: 300px;
	transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease), border-color 0.4s;
}
a.bento__cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.bento__cell--feature { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: clamp(520px, 52vw, 700px); color: #fff; border: 0; background: var(--navy); }
.bento__cell--media { grid-column: 8 / span 5; grid-row: 1; justify-content: space-between; }
.bento__cell--navy { grid-column: 8 / span 5; grid-row: 2; background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.bento__cell:nth-child(4) { grid-column: 1 / span 4; }
.bento__cell--list { grid-column: span 4; justify-content: flex-start; }
.bento__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.bento__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 26, 51, 0) 30%, rgba(10, 26, 51, 0.88) 100%); }
a.bento__cell:hover .bento__bg, a.bento__cell:hover .bento__pic img { transform: scale(1.045); }
.bento__body { display: grid; gap: 10px; max-width: 44ch; position: relative; }
.bento__tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.bento__cell--feature .bento__tag { color: #c7d1e2; }
.bento__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; color: var(--ink); }
.bento__cell--feature .bento__title { font-size: clamp(2rem, 1.2rem + 2vw, 3.2rem); color: #fff; }
.bento__cell--navy .bento__title { color: #fff; }
.bento__text { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.bento__cell--feature .bento__text, .bento__cell--navy .bento__text { color: #c3cddd; }
.bento__go {
	position: absolute; top: clamp(20px, 2vw, 28px); right: clamp(20px, 2vw, 28px);
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--paper); color: var(--ink); transition: transform 0.6s var(--ease), background-color 0.3s, color 0.3s;
}
.bento__cell--feature .bento__go, .bento__cell--navy .bento__go { background: rgba(255, 255, 255, 0.12); color: #fff; }
a.bento__cell:hover .bento__go { background: var(--red); color: #fff; transform: rotate(45deg); }
.bento__pic { display: block; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 9; margin: -8px -8px 8px; }
.bento__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bento__flow { position: absolute; top: 34px; left: 32px; right: 100px; display: grid; gap: 12px; }
.bento__flow i { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; }
.bento__flow i::after { content: ""; position: absolute; inset: 0; width: 30%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--red-soft), transparent); animation: flow 3.2s var(--ease-in-out) infinite; }
.bento__flow i:nth-child(2)::after { animation-delay: 0.5s; width: 22%; }
.bento__flow i:nth-child(3)::after { animation-delay: 1s; width: 36%; }
.bento__flow i:nth-child(4)::after { animation-delay: 1.5s; width: 18%; }
@keyframes flow { from { transform: translateX(-120%); } to { transform: translateX(380%); } }
.bento__tenants { position: absolute; top: 30px; left: 30px; width: 150px; height: 96px; }
.bento__tenants i { position: absolute; inset: 0; border-radius: 14px; border: 1px solid var(--line-2); background: var(--paper); transition: transform 0.7s var(--ease); }
.bento__tenants i:nth-child(1) { transform: translate(0, 0); }
.bento__tenants i:nth-child(2) { transform: translate(14px, 12px); background: #fff; }
.bento__tenants i:nth-child(3) { transform: translate(28px, 24px); background: #fff; border-color: var(--red); }
.bento__tenants i:nth-child(3)::before { content: ""; position: absolute; left: 14px; top: 14px; width: 40%; height: 6px; border-radius: 6px; background: var(--line); box-shadow: 0 14px 0 var(--line), 0 28px 0 -0px rgba(200, 18, 26, 0.5); }
a.bento__cell:hover .bento__tenants i:nth-child(2) { transform: translate(30px, 10px); }
a.bento__cell:hover .bento__tenants i:nth-child(3) { transform: translate(60px, 20px); }
.bento__links { margin-top: auto; border-top: 1px solid var(--line); }
.bento__links li { border-bottom: 1px solid var(--line); }
.bento__links a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; font-weight: 550; color: var(--ink); transition: color 0.25s, padding 0.45s var(--ease); }
.bento__links a .ico { width: 18px; color: var(--muted); transition: transform 0.45s var(--ease), color 0.25s; }
.bento__links a:hover { color: var(--red); padding-left: 6px; }
.bento__links a:hover .ico { color: var(--red); transform: translateX(3px); }
.bento__cell--list .bento__text { margin: 8px 0 24px; }

/* Catalogue */
.catalog { display: grid; gap: clamp(56px, 7vw, 112px); }
.catalog__group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.catalog__aside { position: sticky; top: calc(var(--header) + 32px); align-self: start; display: grid; gap: 12px; }
.catalog__list { border-top: 1px solid var(--ink); }
.catalog__list li { border-bottom: 1px solid var(--line); }
.catalog__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.25fr) 120px 48px; gap: 24px; align-items: center; padding: 22px 0; transition: padding 0.5s var(--ease); }
.catalog__num { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.catalog__name { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.65rem); font-weight: 600; letter-spacing: -0.025em; color: var(--ink); line-height: 1.15; transition: color 0.3s; }
.catalog__short { color: var(--muted); font-size: 15px; line-height: 1.5; }
.catalog__thumb { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; }
.catalog__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0.75; transition: filter 0.6s var(--ease), opacity 0.6s, transform 0.9s var(--ease); }
.catalog__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); transition: all 0.4s var(--ease); }
.catalog__go .ico { width: 18px; }
.catalog__row:hover { padding-left: 8px; }
.catalog__row:hover .catalog__name { color: var(--red); }
.catalog__row:hover .catalog__thumb img { filter: none; opacity: 1; transform: scale(1.06); }
.catalog__row:hover .catalog__go { background: var(--red); color: #fff; border-color: var(--red); }

/* Related */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.related__card { display: grid; gap: 10px; align-content: start; }
.related__pic { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; margin-bottom: 10px; }
.related__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.related__card:hover .related__pic img { transform: scale(1.05); }
.related__tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.related__title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); transition: color 0.3s; }
.related__card:hover .related__title { color: var(--red); }
.related__text { color: var(--muted); font-size: 15.5px; }

/* Split */
.split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.split--rev .split__media { order: -1; }
.split__text { display: grid; gap: 24px; justify-items: start; }
.split--noimg .split__grid { grid-template-columns: minmax(0, 1fr); }
.split--noimg .split__text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 7vw, 120px); align-items: start; }
.split--noimg .split__text > :not(.checklist) { grid-column: 1; }
.split--noimg .checklist { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
.prose { display: grid; gap: 1em; color: var(--text); font-size: 1.075rem; line-height: 1.7; max-width: 62ch; }
.checklist { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 40px); }
.checklist__title { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.checklist .ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--red); color: #fff; stroke-width: 2.4; margin-top: 2px; }
.split__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--tint); }
.split__frame { position: absolute; inset: -8% 0; }
.split__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Cards */
.cards__layout { display: grid; gap: clamp(40px, 5vw, 72px); }
.cards--2 .cards__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.cards--2 .sec-head { position: sticky; top: calc(var(--header) + 32px); }
.cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cards--3 .cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
	display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.6vw, 40px);
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
	transition: transform 0.6s var(--ease), border-color 0.3s, background-color 0.3s;
}
.tone-white .card { background: var(--paper); }
.card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.card__num { font-family: var(--mono); font-size: 13px; color: var(--red); margin-bottom: clamp(16px, 3vw, 48px); }
.card__title { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); line-height: 1.2; letter-spacing: -0.02em; }
.card__body { color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* Process: dark chapter */
.process--sticky {
	background: var(--navy); color: var(--on-navy-muted);
	margin-inline: clamp(8px, 1.2vw, 16px); border-radius: var(--r-xl);
}
.process--sticky .h2, .process--sticky h3 { color: #fff; }
.process--sticky .eyebrow, .process--sticky .sec-head .lede { color: var(--on-navy-muted); }
.process__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); }
.process__sticky { position: sticky; top: calc(var(--header) + 40px); display: grid; gap: 32px; }
.process__meter { height: 2px; background: var(--navy-line); border-radius: 2px; overflow: hidden; }
.process__meter span { display: block; height: 100%; background: var(--red-soft); transform-origin: 0 50%; transform: scaleX(0.25); }
.process__index { display: grid; gap: 4px; }
.process__index li { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; color: rgba(255, 255, 255, 0.4); font-weight: 500; transition: color 0.4s; }
.process__index li span { font-family: var(--mono); font-size: 12.5px; }
.process__index li.is-active { color: #fff; }
.process__index li.is-active span { color: var(--red-soft); }
.process__cta { margin-top: 8px; }
.process__steps { display: grid; gap: clamp(16px, 2vw, 24px); }
.pstep {
	display: grid; gap: 18px; padding: clamp(28px, 3.4vw, 52px); border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.04); border: 1px solid var(--navy-line);
	min-height: clamp(320px, 42vh, 460px); align-content: end;
	transition: background-color 0.5s var(--ease), border-color 0.5s;
}
.pstep.is-active { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); }
.pstep__num { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 1; font-weight: 600; color: rgba(255, 255, 255, 0.35); margin-bottom: auto; transition: color 0.4s var(--ease); }
.pstep.is-active .pstep__num { color: var(--red-soft); }
.pstep__title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.1; }
.pstep__body { color: var(--on-navy-muted); max-width: 52ch; font-size: 1.05rem; }
.pstep__gets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pstep__gets li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--navy-line); font-size: 13.5px; color: #dbe3ef; }

/* Process: light row */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.steps::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.steps__item { display: grid; gap: 14px; align-content: start; padding-top: 32px; position: relative; }
.steps__item::before { content: ""; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--red); }
.steps__num { font-family: var(--mono); font-size: 13px; color: var(--red); }
.steps__title { font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.2; }
.steps__body { color: var(--muted); font-size: 15.5px; }

/* Engagements */
.engage__table { border-top: 1px solid var(--ink); }
.engage__labels { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 3fr) minmax(0, 4fr) 56px; gap: 32px; padding: 14px 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.engage__row {
	position: relative; display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 3fr) minmax(0, 4fr) 56px; gap: 32px;
	align-items: center; padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line);
}
.engage__row::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--ease); }
.engage__row:hover::before { transform: scaleX(1); }
.engage__name { display: grid; gap: 10px; justify-items: start; }
.engage__name h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.05; }
.engage__num { font-family: var(--mono); font-size: 12.5px; color: var(--red); }
.engage__when { color: var(--ink); font-weight: 500; font-size: 1.05rem; line-height: 1.5; }
.engage__what { color: var(--muted); line-height: 1.6; }
.engage__mlabel { display: none; }

/* Industries */
.inds { overflow: hidden; }
.inds__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); }
.inds__head .sec-head { max-width: 760px; }
.inds__hint { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.inds__hint span { width: 48px; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.inds__hint span::after { content: ""; position: absolute; inset: 0; background: var(--red); animation: hint 2.2s var(--ease-in-out) infinite; }
@keyframes hint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.inds__viewport { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
.inds__viewport::-webkit-scrollbar { display: none; }
.inds__track { display: flex; gap: 20px; width: max-content; padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
.ind { width: clamp(280px, 30vw, 460px); scroll-snap-align: start; display: grid; gap: 20px; }
.ind__pic { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--line); }
.ind__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ind:hover .ind__pic img { transform: scale(1.05); }
.ind__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.ind__num { font-family: var(--mono); font-size: 12.5px; color: var(--red); padding-top: 6px; grid-row: span 2; }
.ind__name { font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.2; }
.ind__line { color: var(--muted); font-size: 15px; }
.motion .inds.is-pinnable .inds__viewport { overflow: visible; scroll-snap-type: none; }

/* Scoper */
.scoper__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.scoper__head { position: sticky; top: calc(var(--header) + 32px); }
.scoper__card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(28px, 3.4vw, 52px); box-shadow: var(--shadow); min-height: 440px; display: grid; align-content: start; }
.scoper__progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--tint); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.scoper__progress span { display: block; height: 100%; width: 33.33%; background: var(--red); transition: width 0.6s var(--ease); }
.scoper__count { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 20px; }
.scoper__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.scoper__q + .scoper__q { margin-top: 32px; }
.js .scoper__q + .scoper__q { margin-top: 0; }
.js .scoper__q:not(.is-current) { display: none; }
.scoper__q.is-current { animation: qin 0.6s var(--ease) both; }
@keyframes qin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.scoper__legend { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1.15; margin-bottom: 28px; padding: 0; }
.scoper__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt__box {
	display: flex; gap: 14px; align-items: center; min-height: 76px; padding: 16px 20px;
	border: 1px solid var(--line-2); border-radius: 16px; font-weight: 500; color: var(--ink); line-height: 1.35;
	transition: border-color 0.25s, background-color 0.25s, transform 0.4s var(--ease);
}
.opt__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; position: relative; transition: border-color 0.25s; }
.opt__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform 0.35s var(--ease); }
.opt:hover .opt__box { border-color: var(--ink); }
.opt input:checked + .opt__box { border-color: var(--red); background: #fff5f5; }
.opt input:checked + .opt__box .opt__dot { border-color: var(--red); }
.opt input:checked + .opt__box .opt__dot::after { transform: scale(1); }
.opt input:focus-visible + .opt__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.scoper__result { display: grid; gap: 14px; animation: qin 0.6s var(--ease) both; }
.scoper__result[hidden] { display: none; }
.scoper__rlabel { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.scoper__rtitle { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em; color: var(--ink); line-height: 1.05; }
.scoper__rtext { color: var(--text); font-size: 1.075rem; max-width: 52ch; }
.scoper__rsvc { color: var(--muted); font-size: 15px; }
.scoper__rsvc a { color: var(--ink); font-weight: 550; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.scoper__rsvc a:hover { text-decoration-color: var(--red); }
.scoper__result .actions { margin-top: 12px; }
.scoper__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; justify-self: start; border: 0; background: none; padding: 6px 0; color: var(--muted); font-size: 14.5px; font-weight: 500; }
.scoper__back .ico { width: 16px; transform: rotate(180deg); }
.scoper__back:hover { color: var(--ink); }
.scoper__back[hidden] { display: none; }

/* FAQ */
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); }
.faq__sticky { position: sticky; top: calc(var(--header) + 32px); display: grid; gap: 32px; justify-items: start; }
.faq__list { border-top: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; }
.qa__q h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 550; letter-spacing: -0.015em; line-height: 1.35; transition: color 0.25s; }
.qa__q:hover h3 { color: var(--red); }
.qa__icon { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 0.3s, border-color 0.3s, transform 0.5s var(--ease); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: transform 0.45s var(--ease), background-color 0.3s; }
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.qa[open] .qa__icon::before, .qa[open] .qa__icon::after { background: #fff; }
.qa[open] .qa__icon::after { transform: rotate(0deg); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 64px 28px 0; color: var(--text); max-width: 66ch; line-height: 1.7; }

/* Insights */
.insights__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-auto-rows: auto; gap: 24px 40px; }
.insights__grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-card--feature { grid-row: span 2; }
.post-card__link { display: grid; gap: 12px; align-content: start; }
.post-card__pic { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--line); margin-bottom: 8px; }
.post-card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.post-card__link:hover .post-card__pic img { transform: scale(1.04); }
.post-card__meta { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }
.post-card__title { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.22; transition: color 0.3s; }
.post-card--feature .post-card__title { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; }
.post-card__excerpt { color: var(--muted); max-width: 56ch; }
.post-card__link:hover .post-card__title { color: var(--red); }
.insights__grid:not(.insights__grid--archive) .post-card:not(.post-card--feature) .post-card__link { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
.insights__grid:not(.insights__grid--archive) .post-card:not(.post-card--feature) .post-card__pic { grid-row: span 3; margin: 0; }
.pager { margin-top: 48px; }
.pager .nav-links { display: flex; gap: 8px; }
.pager .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); }
.pager .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* CTA */
.cta { padding-block: clamp(24px, 4vw, 64px) clamp(56px, 7vw, 112px); }
.cta__panel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: var(--navy); min-height: clamp(440px, 44vw, 600px); display: flex; align-items: flex-end; }
.cta__bg { position: absolute; inset: -10% 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: saturate(0.6); }
.cta__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(10, 26, 51, 0.96) 18%, rgba(10, 26, 51, 0.7) 55%, rgba(10, 26, 51, 0.35)); }
.cta__content { padding: clamp(36px, 6vw, 96px); display: grid; gap: 24px; justify-items: start; max-width: 900px; }
.cta__title { color: #fff; font-size: clamp(2.3rem, 1.2rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.045em; max-width: 16ch; text-wrap: balance; }
.cta__title em { background-image: linear-gradient(var(--red-soft), var(--red-soft)); }
.cta__sub { color: #c6d0df; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); max-width: 50ch; }
.cta .actions { margin-top: 12px; }

/* Case study */
.case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.case__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__text { display: grid; gap: 24px; }
.case__facts { display: grid; gap: 18px; margin: 0; }
.case__facts div { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 6px; }
.case__facts dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.case__facts dd { margin: 0; color: var(--ink); }
.case__quote { margin: 0; padding-left: 20px; border-left: 2px solid var(--red); font-size: 1.2rem; color: var(--ink); }
.case__quote footer { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* 8. Forms ----------------------------------------------------------------- */
.contact { padding-top: clamp(48px, 6vw, 96px); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__aside { position: sticky; top: calc(var(--header) + 32px); display: grid; gap: 16px; }
.channels { display: grid; margin-top: 16px; border-top: 1px solid var(--line); }
.channels li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.channels li > span:last-child { display: grid; gap: 2px; }
.channels strong { color: var(--ink); font-weight: 600; }
.channels a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.channels a:hover { text-decoration-color: var(--red); }
.channels__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.channels__ico .ico { width: 19px; height: 19px; }
.form { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(24px, 3.4vw, 52px); box-shadow: var(--shadow); }
.form__body { display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: 14.5px; font-weight: 550; color: var(--ink); padding: 0; }
.field legend { margin-bottom: 10px; }
.req { color: var(--red); }
.opt-l { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.field input, .field textarea, .field select {
	width: 100%; min-height: 52px; padding: 13px 16px; border-radius: var(--r-sm);
	border: 1px solid var(--line-2); background: #fbfcfd; color: var(--ink); font: inherit; font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6680' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--muted); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.18); background: #fff; }
.field [aria-invalid="true"] { border-color: var(--red); }
.field__err { color: var(--red); font-size: 13.5px; min-height: 0; }
.field__err:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; color: var(--ink); transition: all 0.25s var(--ease); user-select: none; }
.chip span::before { content: ""; width: 0; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; transition: width 0.3s var(--ease); margin-right: -8px; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip input:checked + span::before { width: 14px; margin-right: 0; }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--text); line-height: 1.5; cursor: pointer; }
.check input { appearance: none; width: 22px; height: 22px; flex: none; margin: 0; border: 1.5px solid var(--line-2); border-radius: 6px; background: #fff; display: grid; place-items: center; cursor: pointer; transition: all 0.2s; }
.check input::after { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform 0.25s var(--ease); }
.check input:checked { background: var(--red); border-color: var(--red); }
.check input:checked::after { transform: scale(1); }
.check input[aria-invalid="true"] { border-color: var(--red); }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 6px; }
.form__status { font-size: 14.5px; color: var(--muted); }
.form__status.is-error { color: var(--red); }
.form.is-sending .btn { opacity: 0.7; pointer-events: none; }
.form__ok { display: grid; gap: 16px; justify-items: start; padding: 24px 0; animation: qin 0.6s var(--ease) both; }
.form__ok[hidden] { display: none; }
.form__okmark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; }
.form__ok a { color: var(--ink); text-decoration: underline; }

/* 9. Footer ---------------------------------------------------------------- */
.site-footer { background: #071327; color: var(--on-navy-muted); padding-top: clamp(64px, 8vw, 120px); overflow: hidden; font-size: 15px; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: 40px; }
.site-footer__brand { display: grid; gap: 20px; align-content: start; padding-right: 24px; }
.site-footer__brand > p { max-width: 40ch; line-height: 1.6; }
.nap { display: grid; gap: 4px; color: #c9d2e0; }
.nap__name { color: #fff; font-weight: 600; }
.nap a { width: fit-content; transition: color 0.2s; }
.nap a:hover { color: #fff; }
.site-footer__social { display: flex; gap: 10px; }
.site-footer__title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #8392ab; margin-bottom: 16px; }
.site-footer__col ul { display: grid; gap: 10px; }
.site-footer__col a { color: #d5dce8; transition: color 0.2s; }
.site-footer__col a:hover { color: #fff; }
.site-footer__word {
	margin-top: clamp(56px, 7vw, 112px); font-size: clamp(4rem, 23vw, 21.5rem); font-weight: 700; letter-spacing: -0.06em; line-height: 1; padding-bottom: 0.02em; overflow: hidden;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14); white-space: nowrap; user-select: none; margin-left: -0.04em;
}
.site-footer__word span { color: var(--red); -webkit-text-stroke: 0; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 28px 32px; margin-top: 24px; border-top: 1px solid var(--navy-line); font-size: 13.5px; color: #8392ab; }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__bottom a:hover { color: #fff; }

/* 10. Article and prose ---------------------------------------------------- */
.article__head { padding-top: calc(var(--header) + clamp(40px, 6vw, 88px)); }
.article__head .wrap { display: grid; gap: 22px; justify-items: start; }
.article__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.article__hero { margin-block: clamp(40px, 5vw, 72px); }
.article__hero img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-lg); }
.article__box { margin: 56px 0 24px; padding: 24px 28px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.article__box a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose--article { display: block; max-width: none; }
.wrap.prose--article { max-width: calc(780px + var(--gutter) * 2); }
.prose--article { font-size: 1.125rem; line-height: 1.75; }
.prose--article > * + * { margin-top: 1.1em; }
.prose--article h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; line-height: 1.15; margin-top: 2.2em; }
.prose--article h2:first-child { margin-top: 0; }
.prose--article h3 { font-size: 1.3rem; letter-spacing: -0.02em; margin-top: 1.8em; }
.prose--article a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.prose--article ul, .prose--article ol { padding-left: 1.3em; }
.prose--article ul { list-style: disc; }
.prose--article ol { list-style: decimal; }
.prose--article li + li { margin-top: 0.4em; }
.prose--article li::marker { color: var(--red); }
.prose--article strong { color: var(--ink); }
.prose--article blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 2px solid var(--red); color: var(--ink); }
.prose--article table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; margin-block: 1.8em; display: block; overflow-x: auto; }
.prose--article th, .prose--article td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 160px; }
.prose--article th { font-weight: 600; color: var(--ink); background: var(--tint); }
.prose--article h2:first-child + p { font-size: 1.2rem; color: var(--ink); }

/* 11. Motion --------------------------------------------------------------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.wi { display: inline-block; }
.motion [data-split="hero"] .wi { transform: translateY(105%); animation: rise 1.1s var(--ease) forwards; animation-delay: calc(0.08s + var(--i) * 0.055s); }
.motion [data-split="hero"] .dot { display: inline-block; transform: scale(0); animation: pop 0.7s var(--ease) forwards; animation-delay: 0.9s; }
@keyframes rise { to { transform: none; } }
@keyframes pop { to { transform: none; } }
.motion [data-split="hero"] em { background-size: 0% 0.075em; animation: draw 0.9s var(--ease) forwards 0.85s; }
@keyframes draw { to { background-size: 100% 0.075em; } }
.motion [data-reveal], .motion [data-stagger] > * { opacity: 0; transform: translateY(28px); }
.motion .hero [data-reveal], .motion .phero [data-reveal] { animation: fadeup 1s var(--ease) forwards 0.5s; }
.motion .phero .crumbs[data-reveal] { animation-delay: 0.05s; }
@keyframes fadeup { to { opacity: 1; transform: none; } }
.motion [data-split]:not([data-split="hero"]) { visibility: hidden; }
.motion [data-split].is-split { visibility: visible; }
.motion .phero__media[data-clip] { animation: clipin 1.4s var(--ease) both 0.2s; }
@keyframes clipin { from { clip-path: inset(18% 0 0 0 round var(--r-lg)); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); } }
.motion .phero__media[data-clip] img { animation: settle 1.8s var(--ease) both 0.2s; }
@keyframes settle { from { transform: scale(1.18); } to { transform: none; } }
.motion .hero__img { animation: settle 2s var(--ease) both; }
.motion .hero__note { opacity: 0; animation: fadeup 1s var(--ease) forwards 1.1s; transform: translateY(16px); }
.statement__text .sw { transition: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
	.marquee__inner { animation: none; flex-wrap: wrap; width: auto; }
	.marquee__track { -webkit-mask-image: none; mask-image: none; }
	.marquee__list[aria-hidden] { display: none; }
	.marquee__inner { padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
	.marquee__list { flex-wrap: wrap; row-gap: 10px; }
	.marquee__list[aria-hidden="true"] { display: none; }
	.marquee__list { flex-wrap: wrap; padding-inline: var(--gutter); row-gap: 8px; }
}

/* 12. Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
	.mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mega__card { grid-column: 1 / -1; grid-template-columns: 1fr auto auto; align-items: center; }
	.site-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
	.catalog__row { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.2fr) 44px; }
	.catalog__thumb { display: none; }
}
@media (max-width: 1023px) {
	.nav { display: none; }
	.menu-btn { display: grid; }
	.mega { display: none !important; }
	.hero__row { flex-direction: column; align-items: flex-start; }
	.phero__grid, .split__grid, .faq__grid, .scoper__grid, .process__grid, .contact__grid, .case__grid, .catalog__group, .cards--2 .cards__layout { grid-template-columns: minmax(0, 1fr); }
	.split--noimg .split__text { grid-template-columns: minmax(0, 1fr); }
	.split--noimg .checklist { grid-column: 1; grid-row: auto; }
	.split--rev .split__media { order: 0; }
	.phero__media { aspect-ratio: 4 / 3; }
	.split__media { aspect-ratio: 4 / 3; }
	.faq__sticky, .scoper__head, .process__sticky, .contact__aside, .catalog__aside, .cards--2 .sec-head { position: static; }
	.process__index, .process__meter { display: none; }
	.pstep { min-height: 0; }
	.bento__cell--feature { grid-column: 1 / -1; grid-row: auto; min-height: 520px; }
	.bento__cell--media, .bento__cell--navy { grid-column: span 6; grid-row: auto; }
	.bento__cell:nth-child(4) { grid-column: 1 / -1; min-height: 260px; }
	.bento__cell--list { grid-column: span 6; }
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
	.engage__labels { display: none; }
	.engage__row { grid-template-columns: minmax(0, 1fr) 56px; gap: 16px 24px; }
	.engage__name { grid-column: 1 / -1; }
	.engage__when, .engage__what { grid-column: 1; }
	.engage__cta { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
	.engage__mlabel { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 400; }
	.related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.related__card:nth-child(3) { display: none; }
	.cards--3 .cards__grid { grid-template-columns: minmax(0, 1fr); }
	.insights__grid, .insights__grid--archive { grid-template-columns: minmax(0, 1fr); }
	.post-card--feature { grid-row: auto; }
	.sec-head--wide { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
}
@media (max-width: 720px) {
	:root { --header: 68px; }
	body { font-size: 16px; }
	.logo svg { width: 116px; }
	.site-header__actions .btn { display: none; }
	.hero__frame { height: clamp(360px, 110vw, 520px); }
	.hero__img { object-position: 30% 40%; }
	.hero__note { left: calc(var(--gutter) + 14px); right: calc(var(--gutter) + 14px); bottom: 14px; max-width: none; padding: 14px 16px; font-size: 13.5px; }
	.hero__row .actions { width: 100%; }
	.hero__row .btn--primary { flex: 1 1 auto; justify-content: space-between; }
	.bento__cell--media, .bento__cell--navy, .bento__cell--list { grid-column: 1 / -1; }
	.bento__cell--feature { min-height: 460px; }
	.bento__cell--navy { min-height: 280px; }
	.cards__grid { grid-template-columns: minmax(0, 1fr); }
	.steps { grid-template-columns: minmax(0, 1fr); }
	.steps::after, .steps::before { display: none; }
	.steps__item { border-top: 1px solid var(--line-2); padding-top: 24px; }
	.steps__item::before { display: none; }
	.catalog__row { grid-template-columns: 32px minmax(0, 1fr) 40px; gap: 6px 14px; padding: 20px 0; }
	.catalog__short { grid-column: 2; grid-row: 2; }
	.catalog__go { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; }
	.catalog__num { align-self: start; padding-top: 6px; grid-row: 1 / span 2; }
	.related { grid-template-columns: minmax(0, 1fr); }
	.related__card:nth-child(3) { display: grid; }
	.scoper__opts { grid-template-columns: minmax(0, 1fr); }
	.opt__box { min-height: 60px; }
	.form__row { grid-template-columns: minmax(0, 1fr); }
	.qa__a p { padding-right: 0; }
	.inds__hint { display: none; }
	.ind { width: 78vw; }
	.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
	.insights__grid:not(.insights__grid--archive) .post-card:not(.post-card--feature) .post-card__link { grid-template-columns: minmax(0, 1fr); }
	.insights__grid:not(.insights__grid--archive) .post-card:not(.post-card--feature) .post-card__pic { grid-row: auto; margin-bottom: 8px; }
	.sec-top { flex-direction: column; align-items: flex-start; }
	.inds__head { flex-direction: column; align-items: flex-start; }
	.cta__content .actions { width: 100%; }
	.cta__content .btn { width: 100%; justify-content: space-between; }
	.cta__content .btn--light { justify-content: center; }
	.process--sticky { margin-inline: 0; border-radius: 0; }
}


/* 404 links */
.nf__links { padding-top: 0; }
.nf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--line); }
.nf__grid a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; border-bottom: 1px solid var(--line); font-weight: 550; letter-spacing: -0.01em; color: var(--ink); transition: color .2s, padding .4s var(--ease); }
.nf__grid a:hover { color: var(--red); padding-inline: 12px 0; }
.nf__grid svg { width: 18px; height: 18px; flex: none; }

.form__note { margin-top: 16px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* Header and footer of the "dignisys wordpress website" project (navbar.css, footer.css, float.css), copied by
   scripts/import-wp-chrome.mjs. wp-chrome/fit.css, loaded after this, gives them this site's look. */
/* the Next pages leave var(--header) free at the top: this header is 76px, 68px up to 1020px wide */
@media (max-width: 1020px) { :root { --header: 68px; } }

/* components/navbar.css */
/* Dignisys navbar — pure CSS, self-contained, white theme. Every selector is namespaced under .dignisys-nav.
   Desktop: the mega menu opens on hover and keyboard focus (:focus-within); hovering a service swaps its preview in (:has). Mobile: checkbox-driven drawer. No JavaScript. */
.dignisys-nav {
  --dn-bg: #ffffff; --dn-ink: #111111; --dn-muted: #6b6f76; --dn-line: #e3e4e6; --dn-surface: #f3f4f6; --dn-brand: #ba0a0d; --dn-focus: #1f5fbf; --dn-logo: #ba0a0d; --dn-h: 76px; --dn-max: 1280px; --dn-logo-h: 44px; --dn-logo-h-sm: 34px;
  --dn-btn: #ba0a0d; --dn-btn-hover: #960609; --dn-raise: #ffffff; --dn-panel: #ffffff;
  position: fixed; inset: 0 0 auto 0; z-index: 1000; font-family: var(--font, "Plex Sans", Arial, sans-serif); font-size: 15px; line-height: 1.4; color: var(--dn-ink);
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--dn-line);
}
.dignisys-nav *, .dignisys-nav *::before, .dignisys-nav *::after { box-sizing: border-box; }
.dignisys-nav ul { list-style: none; margin: 0; padding: 0; }
.dignisys-nav a { color: inherit; text-decoration: none; }
.dignisys-nav button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dignisys-nav :focus-visible { outline: 2px solid var(--dn-focus); outline-offset: 3px; border-radius: 6px; }
.dignisys-nav__skip { position: absolute; left: 16px; top: -80px; background: var(--dn-btn); color: #fff !important; padding: 10px 14px; z-index: 3; }
.dignisys-nav__skip:focus { top: 12px; }

/* bar */
.dignisys-nav__bar { max-width: var(--dn-max); margin: 0 auto; height: var(--dn-h); padding: 0 clamp(20px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.dignisys-nav__brand { display: flex; align-items: center; flex: none; }
/* logo = two images: "Dignisys." + the divider and "Intelligence for Tomorrow." (cropped from the left as it hides, see "logo on scroll") */
.dignisys-nav__logo, .dignisys-nav__tagline { display: block; width: auto; height: var(--dn-logo-h); }
.dignisys-nav__tagline { max-width: calc(var(--dn-logo-h) * 1.2); object-fit: cover; object-position: left center; }
.dignisys-nav__desktop { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.dignisys-nav__menu { display: flex; align-items: center; gap: 2px; }
.dignisys-nav .dignisys-nav__trigger { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.005em; color: var(--dn-ink); transition: background-color .25s; }
.dignisys-nav .dignisys-nav__trigger:hover, .dignisys-nav__item--mega:hover > .dignisys-nav__trigger, .dignisys-nav__item--mega:focus-within > .dignisys-nav__trigger { background: var(--dn-surface); }
.dignisys-nav__chev { color: var(--dn-muted); transition: transform .25s ease; }
.dignisys-nav__item--mega:hover .dignisys-nav__chev, .dignisys-nav__item--mega:focus-within .dignisys-nav__chev { transform: rotate(180deg); }
/* CTA = the site's button: single ink colour, arrow cell in the same ink */
.dignisys-nav__cta { display: inline-flex; align-items: stretch; height: 44px; border-radius: var(--btn-r, 12px); overflow: hidden; background: var(--dn-btn); color: #fff !important; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color .25s ease; }
.dignisys-nav__cta span { display: flex; align-items: center; padding: 0 20px; }
.dignisys-nav__cta i { display: grid; place-items: center; width: 44px; box-shadow: inset 1px 0 0 rgba(255,255,255,.2); transition: width .3s cubic-bezier(.2,.75,.2,1); }
.dignisys-nav__cta:hover { background: var(--dn-btn-hover); } .dignisys-nav__cta:hover i { width: 52px; }
.dignisys-nav__cta--block { height: 54px; width: 100%; justify-content: space-between; font-size: 15px; margin-top: 28px; } .dignisys-nav__cta--block i { width: 54px; }

/* ===== mega menu ===== */
.dignisys-nav__item--mega { position: static; }
.dignisys-nav__panel { position: absolute; left: 12px; right: 12px; max-width: calc(var(--dn-max) - 24px); margin-inline: auto; top: 100%; visibility: hidden; opacity: 0; transform: translateY(-6px);
  background: var(--dn-panel); border: 1px solid var(--dn-line); border-top: 0; border-radius: 0 0 28px 28px; box-shadow: 0 44px 70px -34px rgba(13,27,46,.22);
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.75,.2,1), visibility 0s linear .3s; }
.dignisys-nav__item--mega:hover .dignisys-nav__panel, .dignisys-nav__item--mega:focus-within .dignisys-nav__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.dignisys-nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* hover bridge */
.dn__card { padding-inline: clamp(20px, 2.6vw, 40px); }
.dn__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px); gap: clamp(18px, 2.4vw, 36px); padding-top: 14px; }
.dn__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(8px, 1.2vw, 18px); align-content: start; }
/* group head: coloured bar, label, count */
.dn__ct { position: relative; display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; padding: 14px 10px 12px; border-bottom: 1px solid var(--dn-line); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dn-ink); }
.dn__ct::before { content: ""; position: absolute; left: 10px; top: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--dn-ink); }
.dn__col:nth-child(2) .dn__ct::before { background: var(--dn-logo); } .dn__col:nth-child(3) .dn__ct::before { background: #9da19b; }
.dn__ct b { font-weight: 600; letter-spacing: .06em; color: #9da19b; }
.dn__list { display: grid; gap: 2px; }
.dn__item { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px; gap: 12px; align-items: center; padding: 7px 10px; border-radius: 14px; transition: background-color .25s; }
.dn__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--dn-surface); color: var(--dn-ink); transition: background-color .25s, color .25s, transform .35s cubic-bezier(.2,.75,.2,1); }
.dn__ico svg { width: 20px; height: 20px; }
.dn__t { display: grid; gap: 1px; min-width: 0; }
.dn__t strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--dn-ink); }
.dn__t span { font-size: 12px; line-height: 1.4; color: var(--dn-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dn__chev2 { width: 7px; height: 7px; border-top: 1.5px solid var(--dn-ink); border-right: 1.5px solid var(--dn-ink); transform: translateX(-6px) rotate(45deg); opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2,.75,.2,1); }
.dn__item:hover, .dn__item:focus-visible { background: var(--dn-surface); }
.dn__item:hover .dn__ico, .dn__item:focus-visible .dn__ico { background: var(--dn-btn); color: #fff; transform: scale(1.05) rotate(-4deg); }
.dn__item:hover .dn__chev2, .dn__item:focus-visible .dn__chev2 { opacity: .7; transform: rotate(45deg); }
/* right panel: two shortcut cards by default; hovering a service swaps in its preview */
.dn__prev { position: relative; margin-bottom: 12px; padding: 12px; border-radius: 22px; background: var(--dn-surface); min-height: 296px; }
.dn__def { display: grid; gap: 10px; align-content: start; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.75,.2,1); }
.dn__card:has(.dn__item:hover) .dn__def, .dn__card:has(.dn__item:focus-visible) .dn__def { opacity: 0; transform: translateY(8px); pointer-events: none; }
.dn__big { position: relative; display: grid; gap: 10px; }
.dn__bi { display: block; aspect-ratio: 16 / 6.8; overflow: hidden; border-radius: 14px; background: #eef1f5; }
.dn__bi img, .dn__ri img, .dn__pvi img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform 1s cubic-bezier(.2,.75,.2,1); }
.dn__big:hover .dn__bi img { transform: scale(1.05); }
.dn__bt { display: grid; gap: 1px; } .dn__bt strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .dn__bt span { font-size: 12.5px; color: var(--dn-muted); }
.dn__bgo { display: flex; align-items: stretch; justify-content: space-between; margin-top: 2px; padding-left: 16px; border-radius: var(--btn-r, 12px); overflow: hidden; background: var(--dn-btn); color: #fff; font-size: 14px; font-weight: 600; line-height: 44px; transition: background-color .25s; }
.dn__bgo i { display: grid; place-items: center; width: 46px; box-shadow: inset 1px 0 0 rgba(255,255,255,.2); transition: width .3s cubic-bezier(.2,.75,.2,1); }
.dn__big:hover .dn__bgo { background: var(--dn-btn-hover); } .dn__big:hover .dn__bgo i { width: 54px; }
.dn__team { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 4px 0 0 2px; font-size: 12.5px; font-weight: 500; color: var(--dn-muted); transition: color .2s; } .dn__team svg { width: 12px; height: 12px; transition: transform .3s; } .dn__team:hover { color: var(--dn-ink); } .dn__team:hover svg { transform: translateX(3px); }
.dn__big > i, .dn__row2 > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dn-btn); color: #fff; transition: transform .35s cubic-bezier(.2,.75,.2,1); }
.dn__big > i { position: absolute; right: 0; bottom: 0; }
.dn__big:hover > i, .dn__row2:hover > i { transform: rotate(-45deg); }
.dn__row2 { display: grid; grid-template-columns: 56px minmax(0, 1fr) 34px; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: var(--dn-raise); transition: background-color .25s; }
.dn__row2:hover { background: #f4f6f9; box-shadow: 0 8px 20px -12px rgba(13,27,46,.2); }
.dn__ri { display: block; width: 56px; height: 44px; overflow: hidden; border-radius: 10px; }
.dn__pvs { position: absolute; inset: 12px 12px auto 12px; pointer-events: none; }
.dn__pv { position: absolute; inset: 0 0 auto 0; display: grid; gap: 7px; align-content: start; opacity: 0; transform: translateY(12px); transition: opacity .28s ease, transform .45s cubic-bezier(.2,.75,.2,1); }
.dn__pvi { position: relative; display: block; aspect-ratio: 16 / 7.6; overflow: hidden; border-radius: 14px; background: #eef1f5; margin-bottom: 3px; }
.dn__pvi em { position: absolute; left: 10px; top: 10px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dn-ink); }
.dn__pvt { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.15; letter-spacing: -.035em; color: var(--dn-ink); }
.dn__pvd { margin: 0; max-width: 36ch; font-size: 13px; line-height: 1.5; color: var(--dn-muted); }
.dn__pvgo { display: inline-flex; align-items: center; width: fit-content; margin-top: 4px; padding-left: 14px; border-radius: var(--btn-r, 12px); overflow: hidden; background: var(--dn-btn); color: #fff; font-size: 13px; font-weight: 600; }
.dn__pvgo i { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 12px; box-shadow: inset 1px 0 0 rgba(255,255,255,.2); }
/* foot */
.dn__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0 14px; border-top: 1px solid var(--dn-line); }
.dn__note { font-size: 13px; color: var(--dn-muted); }
.dn__all { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--dn-ink); border-radius: 999px; font-size: 13px; font-weight: 600; transition: background-color .25s, color .25s; }
.dn__all svg { color: var(--dn-logo); transition: transform .3s cubic-bezier(.2,.75,.2,1); } .dn__all:hover { background: var(--dn-btn); color: #fff; } .dn__all:hover svg { color: #fff; transform: translateX(3px); }
/* entrance: content rises in, service rows stagger */
.dn__grid, .dn__foot { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.75,.2,1); }
.dignisys-nav__item--mega:hover .dn__grid, .dignisys-nav__item--mega:focus-within .dn__grid, .dignisys-nav__item--mega:hover .dn__foot, .dignisys-nav__item--mega:focus-within .dn__foot { opacity: 1; transform: none; transition-delay: .05s; }
.dn__item { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.75,.2,1), background-color .25s; }
.dignisys-nav__item--mega:hover .dn__item, .dignisys-nav__item--mega:focus-within .dn__item { opacity: 1; transform: none; }
.dignisys-nav__item--mega:hover .dn__list li:nth-child(2) .dn__item, .dignisys-nav__item--mega:focus-within .dn__list li:nth-child(2) .dn__item { transition-delay: .05s, .05s, 0s; }
.dignisys-nav__item--mega:hover .dn__list li:nth-child(3) .dn__item, .dignisys-nav__item--mega:focus-within .dn__list li:nth-child(3) .dn__item { transition-delay: .1s, .1s, 0s; }
.dignisys-nav__item--mega:hover .dn__list li:nth-child(4) .dn__item, .dignisys-nav__item--mega:focus-within .dn__list li:nth-child(4) .dn__item { transition-delay: .15s, .15s, 0s; }
/* preview rules — one per service */
.dn__card:has(.dn__item[data-pv="product-development"]:hover) .dn__pv[data-for="product-development"],
.dn__card:has(.dn__item[data-pv="product-development"]:focus-visible) .dn__pv[data-for="product-development"],
.dn__card:has(.dn__item[data-pv="mobile-app-development"]:hover) .dn__pv[data-for="mobile-app-development"],
.dn__card:has(.dn__item[data-pv="mobile-app-development"]:focus-visible) .dn__pv[data-for="mobile-app-development"],
.dn__card:has(.dn__item[data-pv="software-development"]:hover) .dn__pv[data-for="software-development"],
.dn__card:has(.dn__item[data-pv="software-development"]:focus-visible) .dn__pv[data-for="software-development"],
.dn__card:has(.dn__item[data-pv="saas-development"]:hover) .dn__pv[data-for="saas-development"],
.dn__card:has(.dn__item[data-pv="saas-development"]:focus-visible) .dn__pv[data-for="saas-development"],
.dn__card:has(.dn__item[data-pv="websites-and-cms"]:hover) .dn__pv[data-for="websites-and-cms"],
.dn__card:has(.dn__item[data-pv="websites-and-cms"]:focus-visible) .dn__pv[data-for="websites-and-cms"],
.dn__card:has(.dn__item[data-pv="wordpress-development"]:hover) .dn__pv[data-for="wordpress-development"],
.dn__card:has(.dn__item[data-pv="wordpress-development"]:focus-visible) .dn__pv[data-for="wordpress-development"],
.dn__card:has(.dn__item[data-pv="webflow-development"]:hover) .dn__pv[data-for="webflow-development"],
.dn__card:has(.dn__item[data-pv="webflow-development"]:focus-visible) .dn__pv[data-for="webflow-development"],
.dn__card:has(.dn__item[data-pv="framer-development"]:hover) .dn__pv[data-for="framer-development"],
.dn__card:has(.dn__item[data-pv="framer-development"]:focus-visible) .dn__pv[data-for="framer-development"],
.dn__card:has(.dn__item[data-pv="ui-ux-design"]:hover) .dn__pv[data-for="ui-ux-design"],
.dn__card:has(.dn__item[data-pv="ui-ux-design"]:focus-visible) .dn__pv[data-for="ui-ux-design"],
.dn__card:has(.dn__item[data-pv="digital-marketing"]:hover) .dn__pv[data-for="digital-marketing"],
.dn__card:has(.dn__item[data-pv="digital-marketing"]:focus-visible) .dn__pv[data-for="digital-marketing"],
.dn__card:has(.dn__item[data-pv="seo"]:hover) .dn__pv[data-for="seo"],
.dn__card:has(.dn__item[data-pv="seo"]:focus-visible) .dn__pv[data-for="seo"],
.dn__card:has(.dn__item[data-pv="maintenance"]:hover) .dn__pv[data-for="maintenance"],
.dn__card:has(.dn__item[data-pv="maintenance"]:focus-visible) .dn__pv[data-for="maintenance"] { opacity: 1; transform: none; }

/* dim the page behind while the menu is open */
.dignisys-nav::after { content: ""; position: fixed; inset: var(--dn-h) 0 0 0; z-index: -1; background: rgba(10,26,51,.32); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.dignisys-nav:has(.dignisys-nav__item--mega:hover, .dignisys-nav__item--mega:focus-within)::after { opacity: 1; }
/* single-page build: after choosing a page the open menu is dismissed until the pointer leaves it (see js/router.js) */
.dignisys-nav__item--mega.is-dismissed .dignisys-nav__panel { visibility: hidden; opacity: 0; transform: translateY(-8px); transition-delay: 0s; }

/* mobile: checkbox + label burger + drawer */
.dignisys-nav__check { position: absolute; right: clamp(20px, 4vw, 56px); top: 16px; width: 44px; height: 44px; margin: 0 -10px 0 0; opacity: 0; z-index: 4; cursor: pointer; display: none; }
.dignisys-nav__burger { position: absolute; right: clamp(20px, 4vw, 56px); top: 16px; width: 44px; height: 44px; margin-right: -10px; z-index: 3; display: none; pointer-events: none; }
.dignisys-nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s ease, top .3s ease; }
.dignisys-nav__burger span:first-child { top: 18px; } .dignisys-nav__burger span:last-child { top: 25px; }
.dignisys-nav__check:checked + .dignisys-nav__burger span:first-child { top: 21.5px; transform: rotate(45deg); }
.dignisys-nav__check:checked + .dignisys-nav__burger span:last-child { top: 21.5px; transform: rotate(-45deg); }
.dignisys-nav__check:focus-visible + .dignisys-nav__burger { outline: 2px solid var(--dn-focus); outline-offset: 2px; }
.dignisys-nav__drawer { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--dn-h)); height: calc(100dvh - var(--dn-h)); background: var(--dn-bg); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--dn-line); display: none; }
.dignisys-nav__check:checked ~ .dignisys-nav__drawer { display: block; }
.dignisys-nav__drawer-inner { padding: 8px clamp(20px, 4vw, 56px) 40px; display: flex; flex-direction: column; }
.dignisys-nav__row, .dignisys-nav__acc > summary { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--dn-line); font-size: 22px; font-weight: 500; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.dignisys-nav__acc > summary::-webkit-details-marker { display: none; }
.dignisys-nav__acc > summary::after { content: "+"; font-size: 26px; transition: transform .25s; }
.dignisys-nav__acc[open] > summary::after { transform: rotate(45deg); }
.dignisys-nav__acc > a { display: block; padding: 12px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--dn-surface); }
.dignisys-nav__acc .dignisys-nav__col-title { margin: 22px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dn-muted); }
.dignisys-nav__acc[open] { padding-bottom: 14px; border-bottom: 1px solid var(--dn-line); }
.dignisys-nav__acc[open] > summary { border-bottom: 0; }
.dignisys-nav__cta--block { margin-top: 28px; min-height: 54px; font-size: 16px; }

/* drawer: soft icon tile before every service */
.dn__dico { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 12px; border-radius: 11px; background: var(--dn-surface); vertical-align: middle; }
.dignisys-nav__acc > a { display: flex; align-items: center; }

@media (max-width: 1020px) {
  .dignisys-nav { --dn-h: 68px; --dn-logo-h: 38px; --dn-logo-h-sm: 30px; }
  .dignisys-nav__desktop { display: none; }
  .dignisys-nav__check, .dignisys-nav__burger { display: block; top: 12px; }
}
@media (min-width: 1021px) { .dignisys-nav__drawer { display: none !important; } }

/* logo on scroll: once the page is scrolled only "Dignisys." stays; the divider + tagline wipe out towards the wordmark and fade,
   and the wordmark settles to the bar size. Back at the top they return. No JavaScript:
   Chrome/Edge 133+ scroll-state query + transition; Safari 26+ / older Chrome a scroll-driven animation over the first 80px; elsewhere the full logo stays. */
@supports (container-type: scroll-state) {
  html { container-type: scroll-state; }
  .dignisys-nav__logo, .dignisys-nav__tagline { transition: height .5s cubic-bezier(.2,.75,.2,1), max-width .5s cubic-bezier(.2,.75,.2,1), opacity .3s ease; }
  @container scroll-state(scrollable: top) {
    .dignisys-nav__logo, .dignisys-nav__tagline { height: var(--dn-logo-h-sm); }
    .dignisys-nav__tagline { max-width: 0; opacity: 0; }
  }
}
@supports (animation-timeline: scroll()) and (not (container-type: scroll-state)) {
  .dignisys-nav__logo, .dignisys-nav__tagline { animation: dn-logo-scroll linear both; animation-timeline: scroll(root); animation-range: 0 80px; }
  .dignisys-nav__tagline { animation-name: dn-tagline-scroll; }
}
@keyframes dn-logo-scroll { to { height: var(--dn-logo-h-sm); } }
@keyframes dn-tagline-scroll { to { height: var(--dn-logo-h-sm); max-width: 0; opacity: 0; } }
/* laptops 1021–1180: narrower preview, no descriptions */
@media (max-width: 1180px) and (min-width: 1021px) { .dn__grid { grid-template-columns: minmax(0, 1fr) 250px; } .dn__t span { display: none; } .dn__item { grid-template-columns: 34px minmax(0, 1fr) 10px; gap: 10px; } .dn__ico { width: 34px; height: 34px; } .dn__team { display: none; } .dn__prev { min-height: 260px; } .dn__note { display: none; } }
@media (prefers-reduced-motion: reduce) { .dignisys-nav *, .dignisys-nav *::before, .dignisys-nav *::after { transition: none !important; animation: none !important; } .dn__item, .dn__grid, .dn__foot { opacity: 1; transform: none; } }

/* v5: the CTA is a plain button (no arrow box), like every button on the site */
.dignisys-nav__cta i { display: none; } .dignisys-nav__cta span { padding: 0 20px; }
.dignisys-nav { font-weight: 500; }

/* components/footer.css */
/* Dignisys footer — an inset rounded dark panel: brand + CTA on the left, four ruled link columns on the right, a quiet legal bar,
   and the big gradient wordmark cropped at the bottom. Namespaced under .dignisys-footer. No JS. */
.dignisys-footer { --df-bg: #111111; --df-ink: #ffffff; --df-muted: #a3a3a1; --df-line: rgba(255,255,255,.13); --df-glow: #ba0a0d; --df-focus: #8db4ff;
  position: relative; overflow: hidden; margin: 0; border-radius: 0; color: var(--df-ink); font-family: var(--font, "Plex Sans"), Arial, sans-serif; font-size: 15px; line-height: 1.5;
  background:
    #111111; }
.dignisys-footer *, .dignisys-footer *::before, .dignisys-footer *::after { box-sizing: border-box; }
.dignisys-footer a { color: inherit; text-decoration: none; }
.dignisys-footer :focus-visible { outline: 2px solid var(--df-focus); outline-offset: 3px; }
.dignisys-footer__inner { position: relative; z-index: 1; max-width: var(--df-max, 1280px); margin: 0 auto; padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 56px) 26px; }
.dignisys-footer__top { display: grid; grid-template-columns: minmax(250px, 1.25fr) repeat(4, minmax(0, .8fr)); gap: clamp(28px, 3.4vw, 56px); padding-bottom: clamp(44px, 5vw, 72px); }
.dignisys-footer__brand img { display: block; height: 40px; width: auto; }
.dignisys-footer__tagline { margin: 30px 0 10px; font-weight: 300; letter-spacing: -.03em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.dignisys-footer__desc { margin: 0; color: var(--df-muted); max-width: 30ch; }
.dignisys-footer__cta { display: inline-flex; align-items: center; gap: 18px; min-height: 52px; margin-top: 26px; padding-left: 22px; background: #f4f4f1; color: #fff !important; font-weight: 600; font-size: 14px; transition: background-color .3s; }
.dignisys-footer__cta span { display: grid; place-items: center; width: 52px; align-self: stretch; background: var(--df-glow); color: #fff; }
.dignisys-footer__cta:hover { background: #fff; }
.dignisys-footer__cta:hover svg { transform: translateX(3px); transition: transform .3s; }
.dignisys-footer__col h2 { margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--df-line); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #c9ccc6; position: relative; }
.dignisys-footer__col h2::before { content: ""; position: absolute; left: 0; top: -2px; width: 30px; height: 3px; border-radius: 3px; background: var(--df-glow); }
.dignisys-footer__col a { position: relative; display: block; width: fit-content; padding: 6px 0; color: #d9dbd6; transition: color .2s, transform .25s; }
.dignisys-footer__col a:hover { color: #fff; transform: translateX(4px); }
.dignisys-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 22px; border-top: 1px solid var(--df-line); color: #a9ada6; font-size: 13px; }
.dignisys-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-left: auto; }
.dignisys-footer__legal a:hover { color: #fff; }
.dignisys-footer__top-link { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(239,239,235,.3); border-radius: 50%; color: var(--df-ink); transition: background-color .25s, border-color .25s, color .25s; }
.dignisys-footer__top-link:hover { background: var(--df-glow); border-color: var(--df-glow); color: #fff; }
.dignisys-footer__mark { position: relative; z-index: 0; margin: 0; padding: 0 clamp(20px, 4vw, 56px) .24em; text-align: center; font-weight: 600; font-size: clamp(64px, 21.5vw, 330px); line-height: .8; letter-spacing: -.06em; white-space: nowrap; user-select: none; color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.02) 100%); -webkit-background-clip: text; background-clip: text; }
/* the full stop is a real circle (the font's is a square) */
.dignisys-footer__dot { display: inline-block; width: .13em; height: .13em; margin-left: .03em; border-radius: 50%; background: #ba0a0d; vertical-align: baseline; }
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  .dignisys-footer__mark { animation: df-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
} }
@keyframes df-rise { from { transform: translateY(30%); opacity: .2; } to { transform: none; opacity: 1; } }
@media (max-width: 1100px) { .dignisys-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dignisys-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .dignisys-footer__top { gap: 30px 20px; } .dignisys-footer__col a { padding: 8px 0; } .dignisys-footer__legal { margin-left: 0; width: 100%; order: 3; } .dignisys-footer__legal a { display: inline-block; padding: 8px 0; } }
@media (prefers-reduced-motion: reduce) { .dignisys-footer * { transition: none !important; } }

/* v5: plain button, no arrow box */
.dignisys-footer__cta span { display: none; } .dignisys-footer__cta { padding-right: 22px; }

/* v5: column names in the text face, sentence case, no red bar; the giant wordmark is gone (the logo above already carries the name) */
.dignisys-footer__col h2 { font-family: var(--font, "Plex Sans"), Arial, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; }
.dignisys-footer__col h2::before { display: none; }
.dignisys-footer__mark { display: none; }
.dignisys-footer__inner { padding-bottom: clamp(32px, 4vw, 48px); }

/* components/float.css */
/* Floating WhatsApp button — fixed bottom right on every page, WhatsApp green; the label slides out on hover / keyboard focus (desktop).
   Above the page content, below the navbar (z 1000) and its drawer. */
.dignisys-float { position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 900; display: flex; align-items: center; gap: 0; height: 58px; padding: 0 16px;
  border-radius: 999px; background: #25d366; color: #fff; font-family: var(--font, "Plex Sans", Arial, sans-serif); font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); transition: background-color .25s, gap .35s cubic-bezier(.2, .75, .2, 1), transform .3s cubic-bezier(.2, .75, .2, 1); }
.dignisys-float svg { flex: none; width: 26px; height: 26px; }
.dignisys-float span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s cubic-bezier(.2, .75, .2, 1); }
.dignisys-float:hover, .dignisys-float:focus-visible { background: #1ebe5a; gap: 10px; transform: translateY(-2px); }
.dignisys-float:hover span, .dignisys-float:focus-visible span { max-width: 160px; }
.dignisys-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: none) { .dignisys-float span { display: none; } }
@media (max-width: 560px) { .dignisys-float { height: 54px; padding: 0 14px; } .dignisys-float svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .dignisys-float, .dignisys-float span { transition: none; } }

/* The old site's header and footer in this site's design: Geist (var(--font)) with Geist Mono labels, the navy and red
   palette (app/styles/01-tokens.css), pill buttons with the round arrow cell (.btn), the .wrap container
   (var(--max) + var(--gutter)), and the header's behaviour: see-through at the top, frosted once scrolled, hidden while
   scrolling down (site.js sets .is-top / .is-hidden). Hand-written: scripts/import-wp-chrome.mjs leaves this file alone. */

/* Header ------------------------------------------------------------------------------------------------------- */
.dignisys-nav {
	--dn-bg: var(--paper); --dn-ink: var(--ink); --dn-muted: var(--muted); --dn-line: var(--line); --dn-surface: var(--paper);
	--dn-brand: var(--red); --dn-focus: var(--focus); --dn-logo: var(--red); --dn-btn: var(--red); --dn-btn-hover: var(--red-hover);
	--dn-raise: var(--white); --dn-panel: var(--white); --dn-max: calc(var(--max) + var(--gutter) * 2);
	font-family: var(--font); font-weight: 500;
	background: rgba(244, 245, 247, 0.78); border-bottom-color: rgba(10, 26, 51, 0.08);
	-webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
	transition: transform 0.5s var(--ease), background-color 0.35s, border-color 0.35s;
}
.dignisys-nav.is-top:not(:has(.dignisys-nav__check:checked, .dignisys-nav__item--mega:hover, .dignisys-nav__item--mega:focus-within)) {
	background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dignisys-nav:has(.dignisys-nav__item--mega:hover, .dignisys-nav__item--mega:focus-within) { background: var(--white); }
.dignisys-nav.is-hidden { transform: translateY(-100%); }
.dignisys-nav__bar { padding-inline: var(--gutter); }
.dignisys-nav .dignisys-nav__trigger { height: 40px; padding: 0 14px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.dignisys-nav .dignisys-nav__trigger:hover,
.dignisys-nav__item--mega:hover > .dignisys-nav__trigger,
.dignisys-nav__item--mega:focus-within > .dignisys-nav__trigger,
.dignisys-nav .dignisys-nav__trigger[aria-current="page"] { background: rgba(10, 26, 51, 0.06); }
.dignisys-nav__chev { width: 14px; height: 14px; transition: transform 0.35s var(--ease); }

/* Buttons: this site's .btn (pill, red, label + round arrow cell that nudges on hover) */
.dignisys-nav__cta,
.dignisys-footer__cta {
	align-items: center; gap: 14px; height: 46px; min-height: 0; padding: 0 5px 0 20px; border-radius: 999px; overflow: visible;
	background: var(--red); color: #fff !important; font-size: 14.5px; font-weight: 550; letter-spacing: -0.005em;
	transition: background-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.dignisys-nav__cta span { display: inline; padding: 0; }
.dignisys-nav__cta i,
.dignisys-footer__cta span {
	display: grid; place-items: center; align-self: center; width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255, 255, 255, 0.16); box-shadow: none; color: #fff; transition: none;
}
.dignisys-nav__cta svg,
.dignisys-footer__cta svg { width: 15px; height: 15px; transition: transform 0.45s var(--ease); }
.dignisys-nav__cta:hover,
.dignisys-footer__cta:hover { background: var(--red-hover); }
.dignisys-nav__cta:hover i { width: 36px; }
.dignisys-nav__cta:hover svg,
.dignisys-footer__cta:hover svg { transform: translateX(3px); }
.dignisys-nav__cta--block { justify-content: space-between; height: 54px; margin-top: 28px; padding: 0 7px 0 24px; font-size: 15.5px; }
.dignisys-nav__cta--block i,
.dignisys-nav__cta--block:hover i { width: 40px; height: 40px; }

/* Mega menu: white panel, mono group labels, rows like this site's mega menu */
.dignisys-nav__panel { border-color: var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 40px 80px -40px rgba(10, 26, 51, 0.3); }
.dn__ct { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); }
.dn__ct::before { background: var(--navy); }
.dn__col:nth-child(2) .dn__ct::before { background: var(--red); }
.dn__col:nth-child(3) .dn__ct::before { background: var(--line-2); }
.dn__ct b { font-weight: 500; color: var(--line-2); }
.dn__item { border-radius: var(--r-sm); }
.dn__ico { border-radius: var(--r-sm); background: var(--tint); }
.dn__t strong { font-size: 15px; font-weight: 550; letter-spacing: -0.01em; }
.dn__t span { font-size: 13px; }
.dn__prev { border-radius: var(--r-md); background: var(--paper); }
.dn__bi, .dn__pvi { border-radius: var(--r-sm); background: var(--tint); }
.dn__bt strong { font-weight: 550; }
.dn__pvi em { font-family: var(--mono); font-weight: 500; letter-spacing: 0.08em; color: var(--ink); }
.dn__pvt { font-weight: 600; letter-spacing: -0.02em; }
.dn__bgo,
.dn__pvgo {
	align-items: center; justify-content: space-between; width: fit-content; gap: 12px; height: 46px; padding: 0 5px 0 20px;
	border-radius: 999px; background: var(--red); line-height: 1; font-size: 14.5px; font-weight: 550;
}
.dn__pvgo { height: 40px; padding: 0 4px 0 16px; font-size: 13.5px; }
.dn__bgo i,
.dn__pvgo i { width: 36px; height: 36px; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.dn__pvgo i { width: 32px; height: 32px; }
.dn__bgo svg { transition: transform 0.45s var(--ease); }
.dn__big:hover .dn__bgo { background: var(--red-hover); }
.dn__big:hover .dn__bgo i { width: 36px; }
.dn__big:hover .dn__bgo svg { transform: translateX(3px); }
.dn__team { font-weight: 500; }
.dn__all { height: 40px; padding: 0 18px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 550; color: var(--ink); }
.dn__all svg { color: var(--red); }
.dn__all:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.dn__all:hover svg { color: var(--red); }

/* Mobile: round menu button like this site's, mono labels in the drawer */
.dignisys-nav__burger { border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink); }
/* Where the menu button shows, WhatsApp is a round button in the bar just before it (this site's .icon-btn) and the
   floating button at the bottom right goes. The menu button is placed absolutely at the bar's right edge (44px wide,
   10px past the padding), so the WhatsApp button keeps 34px + an 8px gap clear of it. */
.dignisys-nav__wa { display: none; }
@media (max-width: 1020px) {
	.dignisys-nav__wa {
		display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 42px 0 auto;
		border: 1px solid var(--line-2); border-radius: 50%; color: #1fa855; transition: border-color 0.3s, background-color 0.3s;
	}
	.dignisys-nav__wa svg { width: 20px; height: 20px; }
	.dignisys-nav__wa:hover { border-color: var(--ink); background: var(--white); }
	.dignisys-float { display: none; }
}
.dignisys-nav__drawer-inner { padding-inline: var(--gutter); }
.dignisys-nav__row, .dignisys-nav__acc > summary { font-weight: 550; letter-spacing: -0.02em; color: var(--ink); }
.dignisys-nav__acc .dignisys-nav__col-title { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; }
.dn__dico { border-radius: var(--r-sm); background: var(--tint); }

/* Footer: this site's navy footer --------------------------------------------------------------------------- */
.dignisys-footer {
	--df-bg: #071327; --df-ink: #fff; --df-muted: var(--on-navy-muted); --df-line: var(--navy-line); --df-glow: var(--red);
	--df-max: calc(var(--max) + var(--gutter) * 2);
	background: #071327; color: var(--on-navy-muted); font-family: var(--font);
}
.dignisys-footer__inner { padding-inline: var(--gutter); padding-bottom: 0; }
.dignisys-footer__brand img { height: 46px; }
.dignisys-footer__tagline { color: #fff; font-weight: 600; letter-spacing: -0.03em; }
.dignisys-footer__desc { color: var(--on-navy-muted); line-height: 1.6; }
.dignisys-footer__col h2 {
	margin-bottom: 16px; padding-top: 0; border-top: 0;
	font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #8392ab;
}
.dignisys-footer__col a { padding: 5px 0; color: #d5dce8; }
.dignisys-footer__col a:hover { color: #fff; }
.dignisys-footer__base { border-top-color: var(--navy-line); color: #8392ab; font-size: 13.5px; padding-block: 28px 32px; }
.dignisys-footer__top-link { border-color: var(--navy-line); }
.dignisys-footer__top-link:hover { background: var(--red); border-color: var(--red); }

/* WhatsApp button: this site's type */
.dignisys-float { font-family: var(--font); font-weight: 600; }