/* 00-tokens.css */
/* Tokens — DESIGN.md / Paper file AhmedV2 (contentHash 2cfeabf6). Pages use roles, never primitives. */
@font-face {
font-family: 'IBM Plex Sans';
src: url('/assets/fonts/IBMPlexSans.woff2') format('woff2');
font-weight: 100 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
src: url('/assets/fonts/IBMPlexSansArabic-400.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
src: url('/assets/fonts/IBMPlexSansArabic-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
font-family: 'IBM Plex Sans Arabic';
src: url('/assets/fonts/IBMPlexSansArabic-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
:root {
/* Primitives */
--color-white: #FFFFFF;
--color-stone-50: #F5F5F0;
--color-stone-200: #EAE7DC;
--color-stone-300: #D4D8D5;
--color-slate-50: #EFF3F6;
--color-slate-300: #B5C0CA;
--color-slate-500: #6F7B83;
--color-slate-600: #56656F;
--color-navy-800: #19334A;
--color-navy-900: #102235;
--color-navy-950: #071525;
--color-gold-300: #E8CE88;
--color-gold-400: #DABC64;
--color-gold-500: #C9A227;
--color-gold-700: #87681B;
--color-red-700: #B42318;
/* Roles */
--color-background: var(--color-stone-50);
--color-surface: var(--color-white);
--color-surface-muted: var(--color-stone-200);
--color-surface-subtle: var(--color-slate-50);
--color-surface-inverse: var(--color-navy-950);
--color-surface-inverse-raised: var(--color-navy-900);
--color-surface-inverse-hover: var(--color-navy-800);
--color-text: var(--color-navy-900);
--color-text-muted: var(--color-slate-600);
--color-text-inverse: var(--color-white);
--color-text-inverse-muted: var(--color-slate-300);
--color-text-accent: var(--color-gold-700);
--color-border: var(--color-stone-300);
--color-border-strong: var(--color-slate-500);
--color-border-inverse: #FFFFFF26;
--color-border-inverse-strong: #FFFFFF66;
--color-primary: var(--color-navy-950);
--color-on-primary: var(--color-white);
--color-accent: var(--color-gold-400);
--color-on-accent: var(--color-navy-950);
--color-accent-hover: var(--color-gold-300);
--color-focus: var(--color-navy-950);
--color-focus-inverse: var(--color-gold-500);
--color-linkedin: #0A66C2;
--color-error: var(--color-red-700);
/* Type */
--font-sans: "IBM Plex Sans", Arial, sans-serif;
--font-arabic: "IBM Plex Sans", "IBM Plex Sans Arabic", Arial, sans-serif;
--font-weight-display: 380;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--tracking-tighter: -0.045em;
--tracking-tight: -0.04em;
--tracking-snug: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.03em;
--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px;
--text-2xl: 24px; --text-3xl: 28px; --text-4xl: 36px; --text-5xl: 44px; --text-6xl: 56px;
--text-7xl: 72px; --text-8xl: 96px; --text-9xl: 128px;
/* Type roles — desktop values; mobile values swap in below 900px */
--text-numeral: var(--text-9xl); --leading-numeral: 120px;
--text-display: var(--text-7xl); --leading-display: 76px;
--text-heading-1: var(--text-6xl); --leading-heading-1: 60px;
--text-heading-2: var(--text-5xl); --leading-heading-2: 48px;
--text-heading-3: var(--text-3xl); --leading-heading-3: 32px;
--text-title: var(--text-2xl); --leading-title: 30px;
--text-subtitle: var(--text-xl); --leading-subtitle: 26px;
--text-lead: var(--text-xl); --leading-lead: 32px;
--text-body-lg: var(--text-lg); --leading-body-lg: 28px;
--text-body: var(--text-base); --leading-body: 26px;
--text-body-sm: var(--text-sm); --leading-body-sm: 22px;
--text-label: var(--text-xs); --leading-label: 18px;
--text-caption: var(--text-xs); --leading-caption: 16px;
/* Spacing (n × 4px) */
--spacing-0: 0px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px;
--spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px; --spacing-8: 32px; --spacing-10: 40px;
--spacing-12: 48px; --spacing-14: 56px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px;
--spacing-25: 100px; --spacing-28: 112px; --spacing-40: 160px;
/* Layout: 1440 → content 1240, gutter 100, section 112. Fluid between breakpoints. */
--container-content: 1240px;
--spacing-gutter: clamp(24px, 6.95vw, 100px);
--spacing-section: var(--spacing-28);
--page-pad: max(var(--spacing-gutter), calc((100% - var(--container-content)) / 2));
--radius-none: 0px;
--radius-full: 9999px;
--opacity-duotone: 20%;
/* Motion — max 500ms, standard easing */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 160ms;
--dur: 320ms;
--dur-slow: 500ms;
}
@media (max-width: 899px) {
:root {
--text-numeral: var(--text-8xl); --leading-numeral: 92px;
--text-display: var(--text-5xl); --leading-display: 48px;
--text-heading-1: var(--text-4xl); --leading-heading-1: 40px;
--text-heading-2: var(--text-3xl); --leading-heading-2: 32px;
--text-heading-3: var(--text-2xl); --leading-heading-3: 30px;
--text-title: var(--text-xl); --leading-title: 26px;
--text-subtitle: var(--text-lg); --leading-subtitle: 24px;
--text-lead: var(--text-lg); --leading-lead: 28px;
--text-body-lg: var(--text-base); --leading-body-lg: 26px;
--spacing-section: var(--spacing-16);
}
}
@media (max-width: 679px) {
:root { --spacing-gutter: var(--spacing-6); }
}
/* Arabic: IBM Plex Sans keeps Latin and digits, IBM Plex Sans Arabic takes Arabic glyphs; tracking always normal.
Running text (lead, body, caption) gets a 1.7 line height at every width (client review, 2026-10-22). */
html[lang="ar"] {
--font-sans: var(--font-arabic);
--tracking-tighter: 0em;
--tracking-tight: 0em;
--tracking-snug: 0em;
--tracking-wide: 0em;
--leading-lead: 1.7;
--leading-body-lg: 1.7;
--leading-body: 1.7;
--leading-body-sm: 1.7;
--leading-caption: 1.7;
}
/* 10-base.css */
/* Base, typography roles, layout helpers, motion */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: var(--leading-body);
font-weight: var(--font-weight-regular);
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: anywhere;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Focus: 2px ring, navy on light, gold on navy */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.on-inverse :focus-visible, .on-inverse:focus-visible { outline-color: var(--color-focus-inverse); }
.skip-link {
position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100;
background: var(--color-accent); color: var(--color-on-accent);
padding: var(--spacing-3) var(--spacing-5); font-size: var(--text-body-sm); font-weight: var(--font-weight-medium);
}
.skip-link:focus { top: 16px; }
/* Typography roles (DESIGN.md › Typography) */
.t-numeral { font-size: var(--text-numeral); line-height: var(--leading-numeral); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-tighter); }
.t-display { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-tighter); }
.t-heading-1 { font-size: var(--text-heading-1); line-height: var(--leading-heading-1); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-tight); }
.t-heading-2 { font-size: var(--text-heading-2); line-height: var(--leading-heading-2); font-weight: var(--font-weight-display); letter-spacing: var(--tracking-tight); }
.t-heading-3 { font-size: var(--text-heading-3); line-height: var(--leading-heading-3); font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-snug); }
.t-title { font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-snug); }
.t-subtitle { font-size: var(--text-subtitle); line-height: var(--leading-subtitle); font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-snug); }
.t-lead { font-size: var(--text-lead); line-height: var(--leading-lead); font-weight: var(--font-weight-regular); }
.t-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--font-weight-regular); }
.t-body { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-regular); }
.t-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-regular); }
.t-label { font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-wide); }
.t-caption { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--font-weight-regular); }
.t-medium { font-weight: var(--font-weight-medium); }
/* Arabic glyphs are taller: give display sizes a little more room (no new token, next leading step). */
html[lang="ar"] .t-display, html[lang="ar"] .t-heading-1, html[lang="ar"] .t-heading-2 { line-height: 1.2; }
.c-text { color: var(--color-text); }
.c-muted { color: var(--color-text-muted); }
.c-accent { color: var(--color-accent); }
.c-text-accent { color: var(--color-text-accent); }
.c-inverse { color: var(--color-text-inverse); }
.c-inverse-muted { color: var(--color-text-inverse-muted); }
/* Layout: full-bleed sections with content aligned on the 1240 column */
.section { padding-inline: var(--page-pad); padding-block: var(--spacing-section); position: relative; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.bg-background { background: var(--color-background); }
.bg-surface { background: var(--color-surface); }
.bg-surface-muted { background: var(--color-surface-muted); }
.bg-surface-subtle { background: var(--color-surface-subtle); }
.bg-inverse { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.bg-inverse-raised { background: var(--color-surface-inverse-raised); color: var(--color-text-inverse); }
/* Icons: directional icons mirror in RTL (arrows, chevrons only) */
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }
.icon--32 { width: 32px; height: 32px; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }
.icon--duotone path[opacity] { opacity: var(--opacity-duotone); }
/* Scroll reveal (enhancement only: content is visible without JS and with reduced motion) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; transition: none; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* Photo veils: color-mix of primary, opaque on the text side. Pages set --veil on the element. */
.photo { position: relative; overflow: hidden; background: var(--color-surface-inverse); }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-caption { color: var(--color-text-inverse); font-size: var(--text-caption); line-height: var(--leading-caption); }
/* Stagger index for .reveal (data-i="n") */
[data-i="1"] { --i: 1; } [data-i="2"] { --i: 2; } [data-i="3"] { --i: 3; } [data-i="4"] { --i: 4; }
[data-i="5"] { --i: 5; } [data-i="6"] { --i: 6; } [data-i="7"] { --i: 7; } [data-i="8"] { --i: 8; }
[data-i="9"] { --i: 9; } [data-i="10"] { --i: 10; } [data-i="11"] { --i: 11; } [data-i="12"] { --i: 12; }
/* Animated collapsible (disclosures): */
.collapsible { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.collapsible > * { overflow: hidden; min-height: 0; }
.collapsible[data-collapsed] { grid-template-rows: 0fr; }
.collapsible[data-collapsed] > * { visibility: hidden; transition: visibility 0s var(--dur-slow); }
.no-js .collapsible[data-collapsed] { grid-template-rows: 1fr; }
.no-js .collapsible[data-collapsed] > * { visibility: visible; }
/* Two-state button labels: …… */
[aria-expanded="true"] [data-when="closed"], [aria-expanded="false"] [data-when="open"] { display: none; }
/* Shared desktop/mobile text swaps (used when Paper has a separate mobile string) */
@media (max-width: 899px) { .only-wide { display: none !important; } }
@media (min-width: 900px) { .only-narrow { display: none !important; } }
/* 20-components.css */
/* Shared components and sections used on every page (registry: cmp-button, cmp-text-link, cmp-nav,
cmp-language-switch, sec-header, sec-demo-banner, sec-contact, sec-faq, cmp-accordion, cmp-link-tile, sec-footer) */
/* ---------- cmp-button ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-7);
min-height: 52px; padding: var(--spacing-3) var(--spacing-5);
border: 1px solid transparent; border-radius: var(--radius-none);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-normal); white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover .icon--dir { transform: translate(2px, -2px); }
[dir="rtl"] .btn:hover .icon--dir { transform: scaleX(-1) translate(2px, -2px); }
.btn--icon-start { gap: var(--spacing-2); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-hover); }
.btn--outline-inverse { border-color: var(--color-border-inverse-strong); color: var(--color-text-inverse); }
.btn--outline-inverse:hover { background: var(--color-border-inverse); }
.btn--outline { border-color: var(--color-border-strong); color: var(--color-text); }
.btn--outline:hover { background: var(--color-surface); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-surface-inverse-hover); }
.btn--surface { background: var(--color-surface); color: var(--color-text); }
.btn--surface:hover { background: var(--color-surface-subtle); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 899px) { .btn { min-height: 48px; } }
/* ---------- cmp-text-link ---------- */
.text-link {
display: inline-flex; align-items: center; gap: var(--spacing-3); min-height: 44px; width: fit-content;
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
}
.text-link .icon { transition: transform var(--dur) var(--ease); }
.text-link:hover .icon--dir { transform: translateX(3px); }
[dir="rtl"] .text-link:hover .icon--dir { transform: scaleX(-1) translateX(3px); }
.text-link:hover span[data-k] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.text-link--accent { color: var(--color-accent); }
.text-link--text { color: var(--color-text); }
/* ---------- cmp-nav / sec-header ---------- */
.site-nav {
position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between;
height: 88px; padding-inline: var(--page-pad); color: var(--color-text-inverse);
}
.site-nav::after { content: ""; position: absolute; bottom: 0; inset-inline: var(--page-pad); height: 1px; background: var(--color-border-inverse); }
.site-nav--overlay { position: absolute; top: 0; inset-inline: 0; }
.site-nav--solid { background: var(--color-surface-inverse); }
.site-nav__logo { display: block; flex-shrink: 0; width: 285px; height: 38px; }
.site-nav__logo img { width: 100%; height: 100%; object-fit: contain; }
.site-nav__links { display: flex; align-items: center; gap: var(--spacing-7); }
.site-nav__link {
font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-wide);
color: var(--color-text-inverse); padding-block: var(--spacing-3);
text-decoration: underline 1px transparent; text-underline-offset: 8px;
transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.site-nav__link:hover { text-decoration-color: currentColor; }
.site-nav__link[aria-current="page"], .site-nav__link.is-current { color: var(--color-accent); text-decoration-color: currentColor; }
.site-nav__menu-btn { display: none; align-items: center; gap: var(--spacing-2); height: 44px; font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-wide); }
@media (max-width: 1199px) {
.site-nav__links { display: none; }
.site-nav__menu-btn { display: inline-flex; }
}
@media (max-width: 899px) {
.site-nav { height: 80px; }
.site-nav__logo { width: 230px; height: 31px; }
}
@media (max-width: 359px) { .site-nav__logo { width: 190px; } }
/* cmp-language-switch */
.lang-switch { display: inline-flex; align-items: center; gap: var(--spacing-2); font-size: var(--text-label); line-height: var(--leading-label); }
.lang-switch__sep { width: 1px; height: 12px; background: var(--color-border-inverse); }
.lang-switch a, .lang-switch span[aria-current] { padding-block: var(--spacing-3); }
.lang-switch [aria-current="true"] { font-weight: var(--font-weight-medium); color: var(--color-text-inverse); }
.lang-switch a { color: var(--color-text-inverse-muted); transition: color var(--dur-fast) var(--ease); }
.lang-switch a:hover { color: var(--color-text-inverse); }
.lang-switch .lang-en { letter-spacing: var(--tracking-wide); }
/* Mobile menu (dialog) */
.menu-dialog {
margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100%; max-height: none;
background: var(--color-surface-inverse); color: var(--color-text-inverse);
}
.menu-dialog::backdrop { background: color-mix(in oklab, var(--color-primary) 60%, transparent); }
.menu-dialog[open] { display: flex; flex-direction: column; animation: menu-in var(--dur) var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu-dialog__head { display: flex; align-items: center; justify-content: space-between; height: 80px; padding-inline: var(--spacing-gutter); border-bottom: 1px solid var(--color-border-inverse); flex-shrink: 0; }
.menu-dialog__close { display: inline-flex; align-items: center; gap: var(--spacing-2); height: 44px; font-size: var(--text-label); letter-spacing: var(--tracking-wide); }
.menu-dialog__body { flex: 1; overflow-y: auto; padding: var(--spacing-8) var(--spacing-gutter); display: flex; flex-direction: column; gap: var(--spacing-8); }
.menu-dialog__links { display: flex; flex-direction: column; }
.menu-dialog__links a {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
min-height: 60px; border-bottom: 1px solid var(--color-border-inverse);
font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-snug);
}
.menu-dialog__links a[aria-current="page"] { color: var(--color-accent); }
.menu-dialog__foot { display: flex; flex-direction: column; gap: var(--spacing-6); margin-top: auto; }
.menu-dialog__foot .btn { width: 100%; }
/* ---------- sec-demo-banner: one banner fixed at the bottom of the screen (follows the scroll) ---------- */
.demo-banner {
position: fixed; z-index: 60; bottom: 0; inset-inline: 0;
display: flex; align-items: center; justify-content: center; gap: var(--spacing-4);
height: 52px; padding: var(--spacing-2) var(--spacing-5);
background: var(--color-background); border-top: 1px solid var(--color-border); color: var(--color-text);
}
.demo-banner__logo { width: 120px; height: 40px; object-fit: contain; flex-shrink: 0; }
.demo-banner__text { padding-inline-start: var(--spacing-4); border-inline-start: 1px solid var(--color-border); }
body.has-demo-banner { padding-bottom: 52px; }
@media (max-width: 679px) {
.demo-banner { height: 48px; padding: var(--spacing-1) var(--spacing-4); gap: var(--spacing-3); }
.demo-banner__logo { width: 72px; height: 24px; }
.demo-banner__text { padding-inline-start: var(--spacing-3); flex: 1; }
body.has-demo-banner { padding-bottom: 48px; }
}
@media print { .demo-banner { position: static; } body.has-demo-banner { padding-bottom: 0; } }
/* ---------- cmp-nav › Services dropdown (hover, focus or toggle) ---------- */
.nav-dd { position: static; display: flex; align-items: center; gap: var(--spacing-1); }
.nav-dd__toggle { display: inline-grid; place-items: center; width: 24px; height: 44px; color: var(--color-text-inverse); }
.nav-dd__toggle .icon { transition: transform var(--dur) var(--ease); }
.nav-dd.is-open .nav-dd__toggle .icon { transform: rotate(180deg); }
.nav-dd__panel {
position: absolute; top: 100%; inset-inline: var(--page-pad); z-index: 30;
padding: var(--spacing-8) var(--spacing-10) var(--spacing-6);
background: var(--color-surface-inverse); color: var(--color-text-inverse);
border: 1px solid var(--color-border-inverse); border-top-color: transparent;
animation: nav-dd-in var(--dur) var(--ease);
}
@keyframes nav-dd-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-dd__panel::before { content: ""; position: absolute; bottom: 100%; inset-inline: 0; height: 12px; } /* hover bridge */
.nav-dd__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-12); }
.nav-dd__family { padding-bottom: var(--spacing-3); margin-bottom: var(--spacing-2); border-bottom: 1px solid var(--color-border-inverse); }
.nav-dd__list { display: flex; flex-direction: column; }
.nav-dd__link {
display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-3); margin-inline: calc(var(--spacing-3) * -1);
transition: background-color var(--dur-fast) var(--ease);
}
.nav-dd__link:hover, .nav-dd__link[aria-current="page"] { background: var(--color-surface-inverse-hover); }
.nav-dd__link[aria-current="page"] .nav-dd__name { color: var(--color-accent); }
.nav-dd__link .icon { margin-top: -1px; color: var(--color-text-inverse); }
.nav-dd__text { display: flex; flex-direction: column; gap: 2px; }
.nav-dd__foot { display: flex; justify-content: flex-end; margin-top: var(--spacing-4); padding-top: var(--spacing-3); border-top: 1px solid var(--color-border-inverse); }
/* Mobile menu: Services sub-list */
.menu-dialog__group { border-bottom: 1px solid var(--color-border-inverse); }
.menu-dialog__row { display: flex; align-items: center; }
.menu-dialog__row > a { flex: 1; border-bottom: 0 !important; }
.menu-dialog__row > a .icon { display: none; }
.menu-dialog__sub-toggle { display: inline-grid; place-items: center; width: 44px; height: 60px; flex-shrink: 0; }
.menu-dialog__sub { display: flex; flex-direction: column; padding-bottom: var(--spacing-4); }
.menu-dialog__sub a { display: block; padding: var(--spacing-2) 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-text-inverse-muted); }
.menu-dialog__sub a:hover, .menu-dialog__sub a[aria-current="page"] { color: var(--color-text-inverse); }
/* ---------- sec-contact ---------- */
.contact-sec__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); padding-bottom: var(--spacing-16); }
.contact-sec__title .accent { color: var(--color-accent); }
.contact-sec__actions { display: flex; align-items: center; gap: var(--spacing-3); flex-shrink: 0; flex-wrap: wrap; }
.contact-sec__details { display: flex; gap: var(--spacing-14); padding-top: var(--spacing-10); border-top: 1px solid var(--color-border-inverse); }
.contact-sec__col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1 1 0; }
.contact-sec__col--main { flex-grow: 1.4; }
.contact-sec__email { padding-bottom: var(--spacing-5); }
.contact-sec__email a:hover, .contact-sec__line a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-sec__line { min-height: 30px; }
.contact-sec__hours { padding-top: var(--spacing-3); }
.contact-sec__address { padding-top: var(--spacing-5); max-width: 300px; }
.contact-sec__phones { padding-top: var(--spacing-5); }
@media (max-width: 1149px) {
.contact-sec__top { flex-direction: column; align-items: flex-start; gap: var(--spacing-7); }
}
@media (max-width: 899px) {
.contact-sec__top { padding-bottom: var(--spacing-10); }
.contact-sec__actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--spacing-2); }
.contact-sec__actions .btn { width: 100%; }
.contact-sec__details { flex-direction: column; gap: var(--spacing-8); padding-top: var(--spacing-8); }
.contact-sec__email { padding-bottom: var(--spacing-4); font-size: var(--text-xl); line-height: 26px; }
.contact-sec__address { padding-top: var(--spacing-4); max-width: none; font-size: var(--text-caption); line-height: var(--leading-caption); }
.contact-sec__phones { padding-top: var(--spacing-3); }
}
/* ---------- sec-faq / cmp-accordion / cmp-link-tile ---------- */
.faq__layout { display: flex; gap: var(--spacing-25); padding-top: var(--spacing-25); border-top: 1px solid var(--color-border); }
.faq__intro { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-12); }
.faq__list { flex: 1.1 1 0; min-width: 0; }
.faq--flush .faq__layout { border-top: 0; padding-top: 0; }
.accordion { border-bottom: 1px solid var(--color-border-strong); }
.accordion__btn {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-5);
width: 100%; min-height: 88px; padding-block: var(--spacing-6); text-align: start;
color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease);
}
.accordion:first-child .accordion__btn { padding-top: 0; min-height: 60px; }
.accordion__btn:hover, .accordion__btn[aria-expanded="true"] { color: var(--color-text); }
.accordion__q { flex: 1 1 0; min-width: 0; }
.accordion__icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.accordion__icon .icon { position: absolute; inset: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.accordion__btn[aria-expanded="true"] .icon-plus { opacity: 0; transform: rotate(90deg); }
.accordion__btn[aria-expanded="false"] .icon-minus { opacity: 0; transform: rotate(-90deg); }
.accordion__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur) var(--ease); }
.accordion__panel > div { overflow: hidden; }
.accordion__panel[data-collapsed] { grid-template-rows: 0fr; }
.accordion__panel[data-collapsed] > div { visibility: hidden; transition: visibility 0s var(--dur); }
.no-js .accordion__panel[data-collapsed] > div { visibility: visible; }
.accordion__answer { padding-bottom: var(--spacing-6); color: var(--color-text-muted); }
.no-js .accordion__panel[data-collapsed] { grid-template-rows: 1fr; }
/* Label and 24px arrow on one row (client review, 2026-10-22: no empty space above the label) */
.link-tile {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
width: 410px; max-width: 100%; min-height: 72px; padding: var(--spacing-5) var(--spacing-6);
background: var(--color-surface); color: var(--color-text);
font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--font-weight-medium);
transition: background-color var(--dur-fast) var(--ease);
}
.link-tile .icon { transition: transform var(--dur) var(--ease); }
.link-tile:hover { background: var(--color-surface-subtle); }
.link-tile--floating { background: var(--color-background); }
.link-tile--floating:hover { background: var(--color-surface); }
/* On a photo, keep the focus ring on the light tile */
.link-tile--floating:focus-visible { outline-offset: -4px; }
.link-tile:hover .icon--dir { transform: translate(2px, -2px); }
[dir="rtl"] .link-tile:hover .icon--dir { transform: scaleX(-1) translate(2px, -2px); }
@media (max-width: 899px) {
.faq__layout { flex-direction: column; gap: var(--spacing-10); padding-top: var(--spacing-16); }
.faq__intro { display: contents; }
.faq__intro > :first-child { order: 0; }
.faq__list { order: 1; }
.faq__intro .link-tile { order: 2; width: 100%; }
.accordion__btn { min-height: 0; padding-block: var(--spacing-6); }
}
/* ---------- sec-footer ---------- */
.site-footer { background: var(--color-surface-inverse); color: var(--color-text-inverse); padding-inline: var(--page-pad); }
.site-footer__main { display: flex; justify-content: space-between; gap: var(--spacing-12); padding-block: var(--spacing-12); border-top: 1px solid var(--color-border-inverse); }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--spacing-5); flex: 0 1 300px; min-width: 265px; }
.site-footer__brand img { width: 265px; height: 35px; object-fit: contain; object-position: left center; }
[dir="rtl"] .site-footer__brand img { object-position: right center; }
.site-footer__cols { display: flex; gap: var(--spacing-12); min-width: 0; }
.site-footer__col { display: flex; flex-direction: column; gap: var(--spacing-2); flex: 0 1 250px; min-width: 0; }
.site-footer__col:last-child { flex-basis: 240px; }
.site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-6); padding-top: var(--spacing-4); padding-bottom: var(--spacing-7); border-top: 1px solid var(--color-border-inverse); }
.site-footer__links { display: flex; align-items: center; gap: var(--spacing-6); flex-wrap: wrap; }
.site-footer__links a { color: var(--color-text-inverse-muted); transition: color var(--dur-fast) var(--ease); }
.site-footer__links a:hover, .site-footer__links a[aria-current="page"] { color: var(--color-text-inverse); }
.site-footer__social { display: flex; align-items: center; gap: var(--spacing-5); }
.site-footer__linkedin { display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px; margin-block: -11px; }
.site-footer .lang-switch { margin-block: -12px; }
.site-footer__linkedin:hover span[data-k] { text-decoration: underline; text-underline-offset: 4px; }
.site-footer a.c-text-inverse:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1149px) {
.site-footer__main { flex-direction: column; }
.site-footer__brand { flex-basis: auto; }
.site-footer__cols { flex-wrap: wrap; }
}
@media (max-width: 1149px) {
.site-footer__legal { flex-wrap: wrap; }
}
@media (max-width: 899px) {
.site-footer__main { padding-top: var(--spacing-8); padding-bottom: 0; gap: var(--spacing-7); border-top: 0; }
.site-footer__brand { flex-basis: auto; min-width: 0; gap: var(--spacing-7); }
.site-footer__brand img { width: 230px; height: 31px; }
.site-footer__cols { flex-direction: column; gap: var(--spacing-4); }
.site-footer__col { flex-basis: auto; gap: var(--spacing-1); }
.site-footer__col:last-child { flex-basis: auto; }
.site-footer__legal { flex-direction: column; align-items: stretch; gap: var(--spacing-7); padding-top: var(--spacing-7); border-top: 0; }
.site-footer__links { column-gap: var(--spacing-5); row-gap: var(--spacing-2); padding-top: var(--spacing-5); border-top: 1px solid var(--color-border-inverse); order: 1; }
.site-footer__social { justify-content: space-between; order: 2; }
.site-footer__copy { order: 3; }
}
/* ---------- cmp-network-card (generated from src/lib/data/networks.mjs crops) ---------- */
.net-grid { display: flex; flex-wrap: wrap; gap: var(--spacing-2); padding-top: var(--spacing-12); }
.net-card { position: relative; display: flex; flex-direction: column; gap: var(--spacing-5); width: calc(20% - 6.4px); min-height: 292px; padding: var(--spacing-6) var(--spacing-5); background: var(--color-surface-inverse-raised); color: var(--color-text-inverse); transition: background-color var(--dur-fast) var(--ease); }
a.net-card:hover { background: var(--color-surface-inverse-hover); }
.net-card__logo { display: flex; align-items: center; height: 60px; flex-shrink: 0; }
.net-logo { position: relative; display: block; overflow: clip; flex-shrink: 0; }
.net-logo img { position: absolute; max-width: none; filter: grayscale(100%) brightness(0%) invert(100%); }
.net-card__text { display: flex; flex-direction: column; gap: var(--spacing-1); }
.net-card__desc { padding-top: var(--spacing-1); }
.net-card__ext { position: absolute; top: var(--spacing-3); inset-inline-end: var(--spacing-3); color: var(--color-accent); }
[dir="rtl"] .net-card__ext .icon { transform: scaleX(-1); }
@media (max-width: 1149px) { .net-card { width: calc(33.333% - 5.34px); } }
@media (max-width: 899px) { .net-card { width: calc(50% - 4px); min-height: 0; } }
@media (max-width: 679px) { .net-card { width: 100%; } }
.net-logo--crowe { width: 156px; height: 44.5px; }
.net-logo--crowe img { left: -0.84%; top: -43.79%; width: 101.27%; aspect-ratio: 500 / 263; height: auto; }
.net-logo--primeGlobal { width: 180px; height: 32px; }
.net-logo--primeGlobal img { left: 0%; top: 0%; width: 100%; aspect-ratio: 197 / 35; height: auto; }
.net-logo--gpsa { width: 102px; height: 64.4px; }
.net-logo--gpsa img { left: 0%; top: 0%; width: 100%; aspect-ratio: 19 / 12; height: auto; }
.net-logo--boks { width: 152px; height: 50.3px; }
.net-logo--boks img { left: 0%; top: 0%; width: 100%; aspect-ratio: 100 / 33; height: auto; }
.net-logo--irGlobal { width: 164px; height: 46.6px; }
.net-logo--irGlobal img { left: 0%; top: 0%; width: 100%; aspect-ratio: 60 / 17; height: auto; }
.net-logo--vialto { width: 140px; height: 40.7px; }
.net-logo--vialto img { left: -0.08%; top: 0%; width: 100.17%; aspect-ratio: 100 / 29; height: auto; }
.net-logo--mobileWorkforceCollaborative { width: 150px; height: 48px; }
.net-logo--mobileWorkforceCollaborative img { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
[dir="rtl"] .net-logo--mobileWorkforceCollaborative img { object-position: right center; }
.net-logo--gtn { width: 206px; height: 53.8px; }
.net-logo--gtn img { left: 0%; top: 0%; width: 100%; aspect-ratio: 310 / 81; height: auto; }
.net-logo--claMalta { width: 140px; height: 51.1px; }
.net-logo--claMalta img { left: 0%; top: 0%; width: 100%; aspect-ratio: 19 / 7; height: auto; }
.net-logo--globalExpansion { width: 150px; height: 40px; }
.net-logo--globalExpansion img { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
[dir="rtl"] .net-logo--globalExpansion img { object-position: right center; }
/* 40-home.css */
/* Home V2 — Paper HomePage: 05 Desktop 1440 (4MT-0), 08 Mobile 390 (5LX-0), 06 expanded clients (5AX-0).
Desktop mock-up = ≥ 1150 px, mobile mock-up = < 680 px. Classes prefixed "home-". */
/* Text variants (…Mobile keys, mobile mock-up < 680). Layout variants use .only-wide / .only-narrow (10-base.css, 900). */
@media (min-width: 680px) { .page-home .only-mobile { display: none; } }
@media (max-width: 679px) { .page-home .only-desktop { display: none; } }
/* ---------- 01 · sec-hero ---------- */
.home-hero { position: relative; min-height: 900px; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.home-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.home-hero__veil { position: absolute; inset: 0; background-image:
linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 86%, transparent) 0%, color-mix(in oklab, var(--color-primary) 22%, transparent) 18%, transparent 37%),
linear-gradient(in oklab 90deg, color-mix(in oklab, var(--color-primary) 61%, transparent) 0%, color-mix(in oklab, var(--color-primary) 24%, transparent) 48%, transparent 78%),
linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 75%, transparent) 0%, color-mix(in oklab, var(--color-primary) 30%, transparent) 21%, transparent 56%); }
[dir="rtl"] .home-hero__veil { transform: scaleX(-1); }
.home-hero__content { position: relative; padding-inline: var(--page-pad); padding-bottom: var(--spacing-20); animation: home-hero-in var(--dur-slow) var(--ease) both; }
.home-hero__title { color: var(--color-text-inverse); }
.home-hero__lead { width: 450px; max-width: 100%; padding-top: var(--spacing-6); font-size: var(--text-body); line-height: var(--leading-body); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); padding-top: var(--spacing-8); }
@keyframes home-hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 679px) {
.home-hero { min-height: 844px; }
.home-hero__photo { object-position: 78% 50%; }
.home-hero__veil { background-image:
linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 86%, transparent) 0%, color-mix(in oklab, var(--color-primary) 20%, transparent) 18%, transparent 40%),
linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 96%, transparent) 0%, color-mix(in oklab, var(--color-primary) 65%, transparent) 30%, transparent 78%); }
.home-hero__content { padding-bottom: var(--spacing-24); }
.home-hero__accent { display: block; }
.home-hero__lead { width: 280px; padding-top: var(--spacing-5); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.home-hero__actions { gap: var(--spacing-2); padding-top: var(--spacing-6); }
.home-hero__actions .btn { flex-grow: 1; }
}
/* ---------- 02 · sec-logo-strip (+ --expanded, cmp-logo-cell, cmp-disclosure, cmp-sector-row) ---------- */
.home-clients { display: flex; flex-direction: column; padding: var(--spacing-10) var(--page-pad) 0; background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.home-clients__label { padding-bottom: var(--spacing-5); }
.home-strip, .home-sector__grid { display: grid; }
.home-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); padding-block-end: 1px; }
/* Collapsed borders: every cell draws its 4 sides and overlaps its neighbours by 1px */
.home-logo-cell { display: flex; align-items: center; justify-content: center; min-width: 0; height: 120px; border: 1px solid var(--color-border); margin-inline-end: -1px; margin-block-end: -1px; }
.home-logo { max-width: calc(100% - 12px); object-fit: contain; filter: grayscale(100%); mix-blend-mode: multiply; }
.home-clients__toggle {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
width: 100%; margin-top: var(--spacing-5); padding-top: var(--spacing-3); padding-bottom: var(--spacing-4);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text); text-align: start;
}
.home-clients__toggle:hover span[data-k] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.home-clients__icon { display: flex; flex-shrink: 0; }
.home-sectors { margin-top: var(--spacing-5); padding-top: var(--spacing-2); padding-bottom: var(--spacing-12); border-top: 1px solid var(--color-border); transition: opacity var(--dur-slow) var(--ease); }
#home-sectors[data-collapsed] .home-sectors { opacity: 0; }
.home-sector { display: flex; align-items: flex-start; gap: var(--spacing-10); padding-block: var(--spacing-5); }
.home-sector__head { display: flex; flex-direction: column; gap: var(--spacing-1); width: 300px; flex-shrink: 0; padding-top: var(--spacing-3); }
.home-sector__grid { flex: 1 1 0; min-width: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-sector .home-logo-cell { height: 112px; }
@media (max-width: 1149px) {
.home-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-sector { flex-direction: column; gap: var(--spacing-4); }
.home-sector__head { width: auto; padding-top: 0; }
.home-sector__grid { width: 100%; }
}
@media (max-width: 899px) {
.home-strip .home-logo-cell { height: 84px; }
.home-sector__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 679px) {
.home-clients { padding-top: var(--spacing-8); }
.home-clients__label { padding-bottom: var(--spacing-4); }
.home-strip, .home-sector__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-clients__toggle { margin-top: var(--spacing-4); }
.home-sectors { margin-top: var(--spacing-4); padding-bottom: var(--spacing-8); }
.home-sector .home-logo-cell { height: 84px; }
.home-sector .home-logo { transform: scale(0.75); max-width: calc((100% - 8px) / 0.75); }
}
/* ---------- 03 · sec-key-figures (cmp-figure-tile, cmp-badge) ---------- */
/* Client review (2026-10-22): each figure sits right above its label, larger labels and badge icons, no empty band */
.home-figures { display: flex; gap: var(--spacing-3); padding: var(--spacing-20) var(--page-pad) 0; background: var(--color-background); }
.home-figure--feature { display: flex; flex-direction: column; justify-content: center; width: 500px; flex-shrink: 0; padding: var(--spacing-10) var(--spacing-8); background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.home-figure__body { display: flex; flex-direction: column; gap: var(--spacing-3); }
.home-figure__text { max-width: 360px; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.home-figures__side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-3); }
.home-figures__row { display: flex; gap: var(--spacing-3); }
.home-figures__row .home-figure { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-7); background: var(--color-surface); }
.home-badges { display: flex; flex-direction: column; gap: var(--spacing-5); padding: var(--spacing-7); background: var(--color-surface-muted); }
.home-badges__list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.home-badge { display: flex; align-items: center; gap: var(--spacing-4); width: calc(50% - 4px); min-height: 80px; padding: var(--spacing-4) var(--spacing-5); background: var(--color-surface); border: 1px solid var(--color-border); }
.home-badge__dot { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-accent); }
.home-badge__text { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
@media (max-width: 1149px) {
.home-figures { flex-direction: column; }
.home-figure--feature { width: auto; }
}
@media (max-width: 679px) {
.home-figures { gap: var(--spacing-2); padding-top: var(--spacing-14); }
.home-figures__side, .home-figures__row { gap: var(--spacing-2); }
.home-figure--feature { padding: var(--spacing-8) var(--spacing-6); }
.home-figure__text { max-width: none; font-size: var(--text-body); line-height: var(--leading-body); }
.home-figures__row .home-figure { padding: var(--spacing-5) var(--spacing-4); }
.home-figure__label { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.home-badges { gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-4); }
.home-badges__list { flex-direction: column; }
.home-badge { width: 100%; min-height: 0; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); }
}
/* ---------- 04 · sec-split-media (cmp-link-tile--floating) ---------- */
.home-firm { display: flex; gap: var(--spacing-24); }
.home-firm__media { position: relative; width: 590px; height: 560px; flex-shrink: 0; overflow: clip; background: var(--color-surface-inverse); }
.home-firm__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(75%); }
/* Floating cmp-link-tile (20-components.css), sized to its label */
.home-firm__tile { position: absolute; bottom: var(--spacing-4); inset-inline-start: var(--spacing-4); z-index: 1; width: auto; max-width: calc(100% - 2 * var(--spacing-4)); }
/* Client review (2026-10-22): title, gold descriptor, text and navy button grouped and centred against the photo */
.home-firm__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-6); }
.home-firm__head { display: flex; flex-direction: column; gap: var(--spacing-3); }
.home-firm__title { font-weight: var(--font-weight-semibold); }
.home-firm__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-8); }
@media (max-width: 1149px) {
.home-firm { gap: var(--spacing-14); }
.home-firm__media { width: 45%; height: 480px; }
}
@media (max-width: 899px) {
.home-firm { flex-direction: column; gap: var(--spacing-6); padding-top: var(--spacing-14); }
.home-firm__media { width: 100%; height: 400px; }
.home-firm__intro { gap: var(--spacing-6); }
}
@media (max-width: 679px) {
.home-firm__tile { bottom: var(--spacing-3); inset-inline-start: var(--spacing-3); max-width: calc(100% - 2 * var(--spacing-3)); min-height: 60px; padding: var(--spacing-4) var(--spacing-5); }
.home-firm__intro .btn { width: 100%; }
}
/* ---------- Section heading (cmp-section-heading): title + intro and link ---------- */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-12); padding-bottom: var(--spacing-12); }
.home-head__intro { display: flex; flex-direction: column; width: 370px; flex-shrink: 0; }
.home-head__desc { font-size: var(--text-body); line-height: var(--leading-body); }
@media (max-width: 899px) {
.home-head { flex-direction: column; gap: var(--spacing-5); padding-bottom: var(--spacing-8); }
.home-head__intro { width: 100%; max-width: 340px; }
.home-head__desc { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
}
/* ---------- 05 · sec-service-overview (cmp-service-family, cmp-service-link) ---------- */
.home-families { display: flex; align-items: flex-start; gap: var(--spacing-8); }
.home-family { flex: 1 1 0; min-width: 0; }
.home-family__photo { position: relative; height: 248px; overflow: clip; background: var(--color-surface-inverse); }
.home-family__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(55%) brightness(84%); }
.home-family--accounts-advice .home-family__photo img { object-position: 50% 68%; }
.home-family--workforce-solutions .home-family__photo img { object-position: 55% 38%; }
.home-family__photo::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 98%, transparent) 0%, color-mix(in oklab, var(--color-primary) 33.3%, transparent) 43%, transparent 100%); }
.home-family__title { position: absolute; bottom: var(--spacing-6); inset-inline: var(--spacing-6); z-index: 1; color: var(--color-text-inverse); }
.home-family__list { padding-top: var(--spacing-3); }
.home-service { display: flex; flex-direction: column; gap: var(--spacing-1); min-height: 96px; padding-block: var(--spacing-5); border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.home-service__name { text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color var(--dur-fast) var(--ease); }
.home-service:hover .home-service__name { text-decoration-color: currentColor; }
@media (max-width: 899px) {
.home-families { flex-direction: column; gap: var(--spacing-10); }
.home-family { width: 100%; }
.home-family__photo { height: 210px; }
.home-service { min-height: 92px; padding-block: var(--spacing-4); }
}
/* ---------- 06 · sec-journey (cmp-step) ---------- */
.home-journey { display: flex; gap: var(--spacing-24); }
.home-journey__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-6); width: 470px; flex-shrink: 0; }
.home-steps { flex: 1 1 0; min-width: 0; border-top: 1px solid var(--color-border); }
.home-step { display: flex; gap: var(--spacing-7); padding-block: var(--spacing-6); border-bottom: 1px solid var(--color-border); }
.home-step__num { width: 40px; flex-shrink: 0; }
.home-step__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-1); }
@media (max-width: 1149px) {
.home-journey { gap: var(--spacing-14); }
.home-journey__intro { width: 40%; }
}
@media (max-width: 899px) {
.home-journey { flex-direction: column; gap: var(--spacing-5); }
.home-journey__intro { width: 100%; gap: var(--spacing-5); }
.home-step { gap: var(--spacing-4); padding-block: var(--spacing-5); }
.home-step__num { width: 24px; }
}
/* ---------- 07 · sec-card-grid--dark (cmp-network-card; list variant on mobile, not in 20-components.css) ---------- */
@media (max-width: 679px) {
.home-networks .net-grid { padding-top: var(--spacing-8); }
.home-networks .net-card { gap: var(--spacing-3); padding: var(--spacing-5) var(--spacing-4); }
.home-networks .net-card__logo { height: 44px; }
.home-networks .net-logo { zoom: 0.66; }
.home-networks .net-card__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--spacing-3); row-gap: var(--spacing-1); }
.home-networks .net-card__desc { grid-column: 1 / -1; padding-top: 0; }
}
/* ---------- 08 · sec-card-grid (cmp-profile-card) ---------- */
.home-leaders__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-7); padding-top: var(--spacing-12); }
.home-leader { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.home-leader__photo { display: flex; align-items: flex-end; width: 100%; height: 300px; padding: var(--spacing-4); background: var(--color-surface-muted); }
.home-leader__name { padding-top: var(--spacing-5); }
.home-leader__role { padding-top: var(--spacing-1); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.home-leader__bio { max-width: 260px; padding-top: var(--spacing-3); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.home-leader__action {
display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
min-height: 44px; min-width: 116px; margin-top: var(--spacing-5); padding: var(--spacing-2) var(--spacing-5);
border: 1px solid var(--color-border-strong); color: var(--color-text);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
transition: background-color var(--dur-fast) var(--ease);
}
.home-leader__action:hover { background: var(--color-surface); }
@media (max-width: 1149px) { .home-leaders__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--spacing-12); } }
@media (max-width: 679px) {
.home-leaders__grid { column-gap: var(--spacing-5); row-gap: var(--spacing-8); padding-top: var(--spacing-8); }
.home-leader__photo { height: 200px; padding: var(--spacing-3); }
.home-leader__name { padding-top: var(--spacing-3); }
.home-leader__role { font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-wide); }
.home-leader__bio { max-width: none; padding-top: var(--spacing-2); font-size: var(--text-caption); line-height: var(--leading-caption); }
.home-leader__action { padding-inline: var(--spacing-3); }
}
/* ---------- 09 · sec-card-grid (cmp-article-card) ---------- */
.home-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-7); }
.home-article { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-10); height: 100%; min-height: 208px; padding-top: var(--spacing-6); border-top: 1px solid var(--color-text); color: var(--color-text); }
.home-article__top { display: flex; flex-direction: column; gap: var(--spacing-3); }
.home-article__title { text-decoration: underline 1px transparent; text-underline-offset: 5px; transition: text-decoration-color var(--dur-fast) var(--ease); }
.home-article:hover .home-article__title { text-decoration-color: currentColor; }
.home-article__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.home-article__meta .icon { transition: transform var(--dur) var(--ease); }
.home-article:hover .home-article__meta .icon--dir { transform: translate(2px, -2px); }
[dir="rtl"] .home-article:hover .home-article__meta .icon--dir { transform: scaleX(-1) translate(2px, -2px); }
.home-insights > .text-link { margin-top: var(--spacing-4); }
@media (max-width: 899px) {
.home-insights .home-head { gap: var(--spacing-4); padding-bottom: var(--spacing-6); }
.home-articles { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); }
.home-article { gap: var(--spacing-2); min-height: 0; padding-top: var(--spacing-4); }
.home-article__top { gap: var(--spacing-2); }
.home-article__meta { font-size: var(--text-caption); line-height: var(--leading-caption); }
.home-article__meta .icon { display: none; }
}
/* ---------- Logo sizes: generated from src/lib/data/clients.mjs (do not edit by hand) ---------- */
.home-strip .home-logo--siemens { width: 122px; height: 20px; }
.home-strip .home-logo--halliburton { width: 150px; height: 10px; }
.home-strip .home-logo--equinor { width: 100px; height: 40px; }
.home-strip .home-logo--ge-vernova { width: 131px; height: 29px; }
.home-strip .home-logo--motorola-solutions { width: 150px; height: 17px; }
.home-strip .home-logo--sinopec { width: 50px; height: 52px; }
.home-strip .home-logo--knoc { width: 122px; height: 25px; }
.home-strip .home-logo--indian-oil { width: 107px; height: 30px; }
.home-strip .home-logo--air-malta { width: 120px; height: 27px; }
.home-strip .home-logo--sixt { width: 78px; height: 32px; }
.home-strip .home-logo--fragomen { width: 150px; height: 18px; }
.home-strip .home-logo--ifrc { width: 49px; height: 46px; }
.home-sector .home-logo--siemens { width: 109px; height: 18px; }
.home-sector .home-logo--halliburton { width: 144px; height: 10px; }
.home-sector .home-logo--equinor { width: 89px; height: 35px; }
.home-sector .home-logo--ge-vernova { width: 117px; height: 26px; }
.home-sector .home-logo--motorola-solutions { width: 136px; height: 15px; }
.home-sector .home-logo--sinopec { width: 45px; height: 47px; }
.home-sector .home-logo--knoc { width: 110px; height: 22px; }
.home-sector .home-logo--indian-oil { width: 96px; height: 27px; }
.home-sector .home-logo--air-malta { width: 107px; height: 24px; }
.home-sector .home-logo--sixt { width: 70px; height: 29px; }
.home-sector .home-logo--fragomen { width: 136px; height: 17px; }
.home-sector .home-logo--ifrc { width: 44px; height: 42px; }
.home-sector .home-logo--h-fabrication { width: 40px; height: 48px; }
.home-sector .home-logo--tractebel { width: 115px; height: 24px; }
.home-sector .home-logo--nsr { width: 41px; height: 47px; }
.home-sector .home-logo--eaton { width: 85px; height: 23px; }
.home-sector .home-logo--hpc-ibk { width: 105px; height: 19px; }
.home-sector .home-logo--ilf { width: 45px; height: 48px; }
.home-sector .home-logo--medelec { width: 99px; height: 25px; }
.home-sector .home-logo--ltt { width: 43px; height: 43px; }
.home-sector .home-logo--litc { width: 80px; height: 39px; }
.home-sector .home-logo--aljeel-aljadeed { width: 67px; height: 39px; }
.home-sector .home-logo--hertz { width: 68px; height: 26px; }
.home-sector .home-logo--detecon { width: 89px; height: 27px; }
.home-sector .home-logo--regus { width: 65px; height: 33px; }
.home-sector .home-logo--lbbc { width: 82px; height: 30px; }
.home-sector .home-logo--tte { width: 86px; height: 31px; }
.home-sector .home-logo--handicap-international { width: 75px; height: 39px; }
.home-sector .home-logo--irc { width: 33px; height: 43px; }
.home-sector .home-logo--coopi { width: 90px; height: 26px; }
.home-sector .home-logo--tumi { width: 82px; height: 32px; }
.home-sector .home-logo--qafela { width: 94px; height: 30px; }
.home-sector .home-logo--lia { width: 46px; height: 46px; }
.home-sector .home-logo--lidco { width: 109px; height: 29px; }
.home-sector .home-logo--alwafa-bank { width: 49px; height: 46px; }
@media (max-width: 899px) {
.home-strip .home-logo--siemens { width: 87px; height: 14px; }
.home-strip .home-logo--halliburton { width: 100px; height: 8px; }
.home-strip .home-logo--equinor { width: 71px; height: 28px; }
.home-strip .home-logo--ge-vernova { width: 93px; height: 20px; }
.home-strip .home-logo--motorola-solutions { width: 96px; height: 11px; }
.home-strip .home-logo--sinopec { width: 35px; height: 36px; }
.home-strip .home-logo--knoc { width: 87px; height: 17px; }
.home-strip .home-logo--indian-oil { width: 76px; height: 21px; }
.home-strip .home-logo--air-malta { width: 85px; height: 19px; }
.home-strip .home-logo--sixt { width: 55px; height: 23px; }
.home-strip .home-logo--fragomen { width: 96px; height: 12px; }
.home-strip .home-logo--ifrc { width: 35px; height: 33px; }
}
/* 41-services-index.css */
/* Services index V5 — Paper: Services › Desktop 1440 V5 (3JZ-0), Mobile 390 V5 (3SB-0).
Registry: sec-page-intro, sec-tab-index / cmp-tab, sec-service-directory / cmp-service-feature / cmp-service-link--icon,
sec-card-grid--dark / cmp-service-card, sec-story-diagram / cmp-eor-diagram / cmp-service-link--boxed,
sec-cta-banner / cmp-media-caption. */
.page-services .si-only-mobile { display: none; }
@media (max-width: 679px) {
.page-services .si-only-desktop { display: none; }
.page-services .si-only-mobile { display: block; }
}
.page-services .si-caret { transition: transform var(--dur) var(--ease); }
/* ---------- sec-page-intro ---------- */
.si-intro { padding-inline: var(--page-pad); padding-top: var(--spacing-16); padding-bottom: var(--spacing-8); }
.si-intro__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-24); }
.si-intro__title { flex: 0 1 824px; min-width: 0; animation: si-rise var(--dur-slow) var(--ease) both; }
.si-intro__desc { flex: 0 0 320px; padding-bottom: var(--spacing-1); animation: si-rise var(--dur-slow) var(--ease) 80ms both; }
@keyframes si-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1149px) {
.si-intro__row { flex-direction: column; align-items: stretch; gap: var(--spacing-5); }
.si-intro__title { flex: none; }
.si-intro__desc { flex: none; max-width: 560px; padding-bottom: 0; }
}
@media (max-width: 679px) {
.si-intro { padding-top: var(--spacing-10); padding-bottom: var(--spacing-7); }
}
/* ---------- sec-tab-index / cmp-tab (anchor links, current = family in view) ---------- */
.si-tabs { padding-inline: var(--page-pad); background: var(--color-background); }
.si-tabs__row { display: flex; border-bottom: 1px solid var(--color-border); }
.si-tab {
flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--spacing-4); padding: var(--spacing-6);
border-bottom: 2px solid transparent; color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.si-tab:hover { border-bottom-color: var(--color-border-strong); }
.si-tab[aria-current="true"] { border-bottom-color: var(--color-primary); }
.si-tab__text { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
@media (max-width: 679px) {
.si-tab { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-2); min-height: 116px; }
.si-tab .icon--32 { width: 24px; height: 24px; }
}
/* ---------- 01 · Company & Legal: sec-service-directory ---------- */
.si-company { padding-top: var(--spacing-16); padding-bottom: var(--spacing-20); display: flex; flex-direction: column; gap: var(--spacing-8); }
.si-company__layout { display: flex; flex-direction: column; gap: var(--spacing-6); }
.si-feature { display: flex; gap: var(--spacing-6); height: 440px; }
.si-feature__panel {
flex: 0 0 min(480px, 45%); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-6);
padding: var(--spacing-10) var(--spacing-8);
}
.si-feature__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-7); }
.si-feature__head { max-width: 400px; }
.si-feature__desc { max-width: 365px; }
.si-feature__photo { flex: 1 1 0; min-width: 0; margin: 0; }
.si-feature__photo > img { object-position: 50% 50%; }
.si-feature__veil { position: absolute; inset-inline: 0; bottom: 0; height: 100px; background-image: linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 72%, transparent) 0%, color-mix(in oklab, var(--color-primary) 0%, transparent) 100%); }
.si-caption { position: absolute; bottom: var(--spacing-6); inset-inline-end: var(--spacing-7); }
/* cmp-service-link--icon rows, two columns */
.si-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--spacing-10); }
.si-row {
display: flex; align-items: center; gap: var(--spacing-5); min-height: 138px; padding-block: var(--spacing-6);
border-bottom: 1px solid var(--color-border); color: var(--color-text);
}
.si-row__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-2); }
.si-row:hover .si-row__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.si-row:hover .si-caret, .si-card:hover .si-caret, .si-boxed:hover .si-caret, .si-eor-link:hover .si-caret { transform: translateX(3px); }
[dir="rtl"] .si-row:hover .si-caret, [dir="rtl"] .si-card:hover .si-caret, [dir="rtl"] .si-boxed:hover .si-caret, [dir="rtl"] .si-eor-link:hover .si-caret { transform: scaleX(-1) translateX(3px); }
@media (max-width: 899px) {
.si-company__layout { gap: var(--spacing-2); }
.si-feature { flex-direction: column; height: auto; gap: 0; }
.si-feature__photo { order: -1; flex: none; height: 234px; }
.si-feature__veil { height: 80px; }
.si-caption { bottom: 14px; inset-inline-end: var(--spacing-4); }
.si-feature__panel { flex: none; gap: var(--spacing-5); padding: var(--spacing-7) var(--spacing-6); }
.si-feature__head { gap: var(--spacing-4); }
.si-feature__title, .si-feature__desc { max-width: none; }
.si-feature__btn { width: 100%; justify-content: space-between; }
}
@media (max-width: 679px) {
.si-company { padding-top: var(--spacing-12); padding-bottom: var(--spacing-14); gap: var(--spacing-7); }
.si-rows { grid-template-columns: 1fr; }
.si-row { min-height: 120px; }
}
/* ---------- 02 · Accounts & Advice: sec-card-grid--dark / cmp-service-card ---------- */
.si-accounts { padding-block: var(--spacing-20); display: flex; flex-direction: column; gap: var(--spacing-8); }
.si-cards { display: grid; grid-template-columns: repeat(4, 1fr); }
.si-card {
display: flex; flex-direction: column; gap: var(--spacing-6); min-height: 350px; padding: var(--spacing-7);
background: var(--color-surface-inverse-raised); color: var(--color-text-inverse);
border-inline-end: 1px solid var(--color-border-inverse);
transition: background-color var(--dur-fast) var(--ease);
}
.si-card:hover { background: var(--color-surface-inverse-hover); }
.si-card__text { display: flex; flex-direction: column; gap: var(--spacing-3); }
.si-card__name { min-height: 64px; }
.si-card__summary { min-height: 72px; color: var(--color-text-inverse-muted); }
.si-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: var(--spacing-6); border-top: 1px solid var(--color-border-inverse); }
.si-card--highlight { background: var(--color-surface-subtle); color: var(--color-text); border-inline-end: 0; }
.si-card--highlight:hover { background: var(--color-surface); }
.si-card--highlight .si-card__summary { color: var(--color-text-muted); }
.si-card--highlight .si-card__foot { border-top-color: var(--color-border); }
.si-card--highlight:focus-visible { outline-color: var(--color-focus-inverse); }
@media (max-width: 1149px) {
.si-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 679px) {
.si-accounts { padding-top: var(--spacing-12); padding-bottom: var(--spacing-14); gap: var(--spacing-7); }
.si-cards { grid-template-columns: 1fr; gap: var(--spacing-3); }
.si-card { min-height: 0; gap: var(--spacing-4); padding: var(--spacing-6); border-inline-end: 0; }
.si-card__text { gap: var(--spacing-2); }
.si-card__name, .si-card__summary { min-height: 0; }
.si-card__foot { margin-top: 0; min-height: 44px; padding-top: var(--spacing-3); }
}
/* ---------- 03 · Workforce Solutions: sec-story-diagram ---------- */
.si-workforce { padding-block: var(--spacing-20); display: flex; flex-direction: column; gap: var(--spacing-12); }
.si-workforce__story { display: flex; align-items: center; gap: var(--spacing-14); }
.si-workforce__text { flex: 0 1 464px; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-6); }
.si-workforce__desc { max-width: 415px; }
.si-eor-link {
display: flex; align-items: center; gap: var(--spacing-3); max-width: 410px; padding-block: var(--spacing-4);
border-bottom: 1px solid var(--color-text); color: var(--color-text);
}
.si-eor-link__name { min-width: 0; }
.si-eor-link__caret { flex: 1 1 0; display: flex; justify-content: flex-end; }
.si-eor-link:hover .si-eor-link__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.si-workforce__diagram { margin: 0; flex-shrink: 0; }
/* cmp-eor-diagram — desktop composition: 720 × 442, positions from Paper (logical insets, mirrored in RTL) */
.si-eor--desktop { position: relative; width: 720px; height: 442px; background: var(--color-surface); border: 1px solid var(--color-border); }
.si-eor__lines { position: absolute; top: 0; inset-inline-start: 0; width: 718px; height: 416px; }
[dir="rtl"] .si-eor__lines { transform: scaleX(-1); }
.si-eor__lines path { fill: none; stroke: var(--color-border-strong); stroke-width: 1.2; }
.si-eor__lines circle { fill: var(--color-border-strong); }
.si-eor__node {
position: absolute; top: 65px; height: 72px; display: flex; align-items: center; justify-content: center; gap: var(--spacing-2);
border-block: 1px solid var(--color-border); color: var(--color-text);
}
.si-eor__node--business { inset-inline-start: 32px; width: 170px; }
.si-eor__node--team { inset-inline-start: 514px; width: 172px; }
.si-eor__firm {
position: absolute; top: 47px; inset-inline-start: 254px; width: 210px; height: 108px;
display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-5);
border-top: 3px solid var(--color-border-inverse-strong);
}
.si-eor__parts > li {
position: absolute; top: 282px; width: 190px; height: 132px; display: flex; flex-direction: column; gap: var(--spacing-2);
padding: var(--spacing-4); background: var(--color-surface-subtle); color: var(--color-text);
}
.si-eor__parts > li:nth-child(1) { inset-inline-start: 32px; }
.si-eor__parts > li:nth-child(2) { inset-inline-start: 264px; }
.si-eor__parts > li:nth-child(3) { inset-inline-start: 496px; }
/* cmp-eor-diagram — mobile (vertical) */
.si-eor--mobile { display: none; flex-direction: column; align-items: center; padding: var(--spacing-6); background: var(--color-surface); border: 1px solid var(--color-border); }
.si-eor__end { display: flex; align-items: center; justify-content: center; gap: var(--spacing-3); min-height: 56px; color: var(--color-text); text-align: center; }
.si-eor__down { flex-shrink: 0; width: 100%; max-width: 292px; height: 28px; }
.si-eor__down path { fill: none; stroke: var(--color-border-strong); stroke-width: 1.2; }
.si-eor__stack { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-5); }
.si-eor__stack-head { display: flex; flex-direction: column; gap: var(--spacing-1); }
.si-eor__stack ul { display: flex; flex-direction: column; gap: var(--spacing-4); }
.si-eor__item { display: flex; align-items: center; gap: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px solid var(--color-border-inverse); }
.si-eor__item > span { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
/* cmp-service-link--boxed */
.si-boxed-row { display: flex; gap: var(--spacing-10); }
.si-boxed {
flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: var(--spacing-5); min-height: 150px; padding: var(--spacing-7);
background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text);
transition: background-color var(--dur-fast) var(--ease);
}
.si-boxed:hover { background: var(--color-surface-subtle); }
.si-boxed__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-3); }
.si-boxed__summary { max-width: 340px; }
.si-boxed__caret { flex-shrink: 0; width: 24px; padding-top: var(--spacing-2); }
@media (max-width: 1279px) {
.si-workforce__story { flex-direction: column; align-items: stretch; gap: var(--spacing-10); }
.si-workforce__text { flex: none; max-width: 640px; }
}
@media (max-width: 899px) {
.si-eor--desktop { display: none; }
.si-eor--mobile { display: flex; }
.si-workforce__story { gap: var(--spacing-7); }
.si-workforce__text { gap: var(--spacing-5); }
.si-workforce__desc { font-size: var(--text-body); line-height: var(--leading-body); }
.si-eor-link { max-width: none; min-height: 56px; padding-top: var(--spacing-2); padding-bottom: var(--spacing-4); }
.si-boxed-row { flex-direction: column; gap: var(--spacing-4); }
.si-boxed { align-items: center; gap: var(--spacing-3); min-height: 132px; padding: var(--spacing-6) var(--spacing-5); }
.si-boxed__text { gap: var(--spacing-2); }
.si-boxed__summary { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.si-boxed__caret { width: 20px; }
}
@media (max-width: 679px) {
.si-workforce { padding-block: var(--spacing-12); gap: var(--spacing-6); }
}
/* ---------- sec-cta-banner ---------- */
.si-cta-sec { padding-bottom: var(--spacing-20); }
.si-cta {
position: relative; overflow: clip; height: 480px; padding: var(--spacing-16);
display: flex; align-items: center; justify-content: flex-end;
}
[dir="rtl"] .si-cta { justify-content: flex-start; }
.si-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Text stays on the right in both languages: the building (left of the photo) must stay visible; the opaque side is under the text. */
.si-cta__veil { position: absolute; inset: 0; background-image: linear-gradient(in oklab 90deg, color-mix(in oklab, var(--color-primary) 4%, transparent) 0%, color-mix(in oklab, var(--color-primary) 18%, transparent) 40%, color-mix(in oklab, var(--color-primary) 88%, transparent) 68%, color-mix(in oklab, var(--color-primary) 94%, transparent) 100%); }
.si-cta__content { position: relative; width: min(490px, 100%); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-7); }
.si-cta__text { display: flex; flex-direction: column; gap: var(--spacing-5); }
.si-cta__desc { max-width: 440px; color: var(--color-text-inverse); }
.si-cta__caption { position: absolute; bottom: var(--spacing-7); left: var(--spacing-8); }
@media (max-width: 899px) {
.si-cta-sec { padding-bottom: var(--spacing-16); }
.si-cta { padding: var(--spacing-10); }
}
@media (max-width: 679px) {
.si-cta-sec { padding-bottom: var(--spacing-12); }
.si-cta { height: 540px; padding: var(--spacing-7); align-items: flex-end; justify-content: flex-start; }
.si-cta__img { object-position: 30% 10%; }
.si-cta__veil { background-image: linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 5%, transparent) 0%, color-mix(in oklab, var(--color-primary) 12%, transparent) 30%, color-mix(in oklab, var(--color-primary) 90%, transparent) 56%, color-mix(in oklab, var(--color-primary) 98%, transparent) 100%); }
.si-cta__content { width: 100%; max-width: 286px; gap: var(--spacing-6); }
.si-cta__text { gap: var(--spacing-4); }
.si-cta__desc { font-size: var(--text-body); line-height: var(--leading-body); }
.si-cta__btn { width: 100%; justify-content: space-between; }
.si-cta__caption { top: var(--spacing-5); bottom: auto; left: auto; inset-inline-start: var(--spacing-5); }
}
/* 42-service.css */
/* Service template G — 12 pages. Paper: Template Service › RE1-0 (desktop 1440), 12KM-0 (mobile 390) and the 11 service copies.
Sections: sec-hero--service, sec-service-scope, sec-journey--boxed (cmp-step--boxed), sec-credentials (cmp-badge),
sec-logo-strip--sectors, sec-faq (shared), sec-related-services (cmp-service-link--boxed), sec-contact (shared). */
/* ---------- sec-hero--service ---------- */
.svc-hero { position: relative; height: 800px; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.svc-hero__photo { position: absolute; inset: 0; overflow: hidden; }
.svc-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Paper zoomed crops (backgroundSize > 100%) are rebuilt below: the image is sized to the zoom and placed like
background-position (left/top = p %, then translated back by p % of its own size). */
.svc-hero__photo img { --px: 50%; --py: 50%; }
.svc-hero__veil { position: absolute; inset: 0; background-image:
linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 55%, transparent) 0%, transparent 20%),
linear-gradient(in oklab 90deg, color-mix(in oklab, var(--color-primary) 75%, transparent) 0%, color-mix(in oklab, var(--color-primary) 45%, transparent) 40%, transparent 64%),
linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 60%, transparent) 0%, transparent 42%); }
[dir="rtl"] .svc-hero__veil { transform: scaleX(-1); }
.svc-hero__content { position: relative; padding-inline: var(--page-pad); padding-bottom: var(--spacing-20); animation: svc-hero-in var(--dur-slow) var(--ease) both; }
@keyframes svc-hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.svc-hero__title { color: var(--color-text-inverse); max-width: 100%; }
.svc-hero__lead { width: 450px; max-width: 100%; padding-top: var(--spacing-6); font-size: var(--text-body); line-height: var(--leading-body); }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); padding-top: var(--spacing-8); }
.svc-hero__caption { position: absolute; bottom: var(--spacing-6); inset-inline-end: var(--page-pad); max-width: calc(100% - 2 * var(--spacing-gutter)); }
/* Hero framing per service (Paper backgroundSize / backgroundPosition, desktop artboards). */
.svc-hero--audit .svc-hero__photo { --zw: 140%; }
.svc-hero--audit .svc-hero__photo img { --px: 0%; --py: 45%; }
.svc-hero--payroll .svc-hero__photo { --zw: 146%; }
.svc-hero--payroll .svc-hero__photo img { --px: 50%; --py: 0%; }
.svc-hero--tax .svc-hero__photo { --zw: 122%; }
.svc-hero--tax .svc-hero__photo img { --px: 40%; --py: 12%; }
.svc-hero--advisory .svc-hero__photo { --zw: 150%; }
.svc-hero--advisory .svc-hero__photo img { --px: 95%; --py: 55%; }
.svc-hero--formation .svc-hero__photo { --zw: 125%; }
.svc-hero--formation .svc-hero__photo img { --px: 70%; --py: 60%; }
.svc-hero--accounting .svc-hero__photo { --zh: 118%; }
.svc-hero--accounting .svc-hero__photo img { --px: 40%; --py: 50%; }
@media (min-width: 680px) {
.svc-hero--audit .svc-hero__photo img, .svc-hero--payroll .svc-hero__photo img, .svc-hero--tax .svc-hero__photo img,
.svc-hero--advisory .svc-hero__photo img, .svc-hero--formation .svc-hero__photo img {
inset: auto; left: var(--px); top: var(--py); width: var(--zw); height: auto; min-height: 100%;
transform: translate(calc(var(--px) * -1), calc(var(--py) * -1)); object-position: var(--px) var(--py);
}
.svc-hero--accounting .svc-hero__photo img {
inset: auto; left: var(--px); top: var(--py); height: var(--zh); width: auto; min-width: 100%;
transform: translate(calc(var(--px) * -1), calc(var(--py) * -1)); object-position: var(--px) var(--py);
}
}
/* ---------- sec-service-scope ---------- */
.svc-scope { display: flex; gap: var(--spacing-20); }
.svc-scope__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-12); }
.svc-scope__heading { display: flex; flex-direction: column; gap: var(--spacing-6); }
.svc-scope__intro { max-width: 560px; }
.svc-scope__row { display: flex; gap: var(--spacing-8); padding-block: var(--spacing-6); border-top: 1px solid var(--color-border); }
.svc-scope__row:first-child { border-top-color: var(--color-border-strong); }
.svc-scope__row:last-child { border-bottom: 1px solid var(--color-border); }
.svc-scope__row-title { width: 220px; flex-shrink: 0; color: var(--color-text); }
.svc-scope__row-detail { flex: 1 1 0; min-width: 0; }
.svc-scope__photo { position: relative; width: 480px; flex-shrink: 0; overflow: hidden; background: var(--color-surface-inverse); }
.svc-scope__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.svc-scope__shade { position: absolute; inset-inline: 0; bottom: 0; height: 120px; background-image: linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 72%, transparent) 0%, transparent 100%); }
.svc-scope__credit { position: absolute; bottom: var(--spacing-6); inset-inline-start: var(--spacing-7); inset-inline-end: var(--spacing-7); }
.svc-scope--formation .svc-scope__photo img { inset: auto; left: 25%; top: 45%; width: 170%; height: auto; min-height: 100%; transform: translate(-25%, -45%); object-position: 25% 45%; }
/* ---------- sec-journey--boxed / cmp-step--boxed ---------- */
.svc-journey { display: flex; flex-direction: column; gap: var(--spacing-16); }
.svc-journey__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-20); }
.svc-journey__intro { width: 420px; max-width: 100%; flex-shrink: 0; }
.svc-steps { --gap: var(--spacing-8); display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--spacing-12); }
.svc-steps--5 { --cols: 5; }
.svc-steps--6 { --cols: 3; }
.svc-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--spacing-6); align-content: start; }
.svc-step__marker { display: flex; align-items: center; width: calc(100% + var(--gap)); }
.svc-step__num { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex-shrink: 0; border: 1px solid var(--color-border-inverse-strong); color: var(--color-accent); }
.svc-step__line { flex: 1 1 0; height: 0; border-top: 2px dotted var(--color-border-inverse-strong); }
.svc-step--final .svc-step__num { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.svc-step--final .svc-step__line, .svc-steps--6 .svc-step:nth-child(3n) .svc-step__line { visibility: hidden; }
.svc-step__text { display: flex; flex-direction: column; gap: var(--spacing-3); padding-inline-end: var(--spacing-4); min-height: 104px; }
.svc-steps--6 .svc-step__text { min-height: 82px; }
.svc-step__provide { display: flex; flex-direction: column; gap: var(--spacing-2); padding-top: var(--spacing-5); padding-inline-end: var(--spacing-4); border-top: 1px solid var(--color-border-inverse); align-self: start; }
.svc-receive { display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-6); background: var(--color-surface); color: var(--color-text); align-self: start; }
.svc-receive__label { color: var(--color-text-accent); }
.svc-receive__list { display: flex; flex-direction: column; gap: var(--spacing-3); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
/* ---------- sec-credentials / cmp-badge ---------- */
.svc-cred { display: flex; gap: var(--spacing-20); }
.svc-cred__heading { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-6); }
.svc-cred__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-10); }
.svc-cred__badges { display: flex; flex-direction: column; gap: var(--spacing-5); padding: var(--spacing-7); background: var(--color-surface-muted); }
.svc-cred__badge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); }
.svc-badge { display: flex; align-items: center; gap: var(--spacing-4); min-height: 80px; padding: var(--spacing-4) var(--spacing-5); background: var(--color-surface); border: 1px solid var(--color-border); }
.svc-badge__dot { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-accent); }
.svc-badge__text { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
.svc-cred__members-label { padding-bottom: var(--spacing-3); }
.svc-member { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-6); padding-block: var(--spacing-4); border-top: 1px solid var(--color-border); }
.svc-member:last-child { border-bottom: 1px solid var(--color-border); }
.svc-member > :last-child { flex-shrink: 0; }
/* ---------- sec-logo-strip--sectors ---------- */
.svc-sectors { display: flex; flex-direction: column; gap: var(--spacing-5); padding: var(--spacing-section) var(--page-pad) var(--spacing-10); background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border); }
.svc-sectors__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-20); padding-bottom: var(--spacing-10); }
.svc-sectors__tags { display: flex; flex-wrap: wrap; gap: var(--spacing-2); width: 640px; max-width: 100%; flex-shrink: 0; }
.svc-sectors__tag { padding: var(--spacing-2) var(--spacing-4); background: var(--color-surface); color: var(--color-text); }
.svc-sectors__logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-inline-start: 1px solid var(--color-border); }
.svc-logo { display: flex; align-items: center; justify-content: center; height: 120px; border-inline-end: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.svc-logo__img { width: var(--lw); height: var(--lh); max-width: 80%; object-fit: contain; filter: grayscale(100%); mix-blend-mode: multiply; }
/* Paper logo boxes (desktop RJP-0; mobile 13C6-0 ≈ 0.71×) */
.svc-logo__img--siemens { --lw: 122px; --lh: 20px; }
.svc-logo__img--halliburton { --lw: 150px; --lh: 10px; }
.svc-logo__img--equinor { --lw: 100px; --lh: 40px; }
.svc-logo__img--ge-vernova { --lw: 131px; --lh: 29px; }
.svc-logo__img--motorola-solutions { --lw: 150px; --lh: 17px; }
.svc-logo__img--sinopec { --lw: 50px; --lh: 52px; }
.svc-logo__img--knoc { --lw: 122px; --lh: 25px; }
.svc-logo__img--indianoil { --lw: 107px; --lh: 30px; }
.svc-logo__img--air-malta { --lw: 120px; --lh: 27px; }
.svc-logo__img--sixt { --lw: 78px; --lh: 32px; }
.svc-logo__img--fragomen { --lw: 150px; --lh: 18px; }
.svc-logo__img--ifrc { --lw: 49px; --lh: 46px; }
.svc-sectors__all { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); min-height: 44px; padding-top: var(--spacing-3); padding-bottom: var(--spacing-4); color: var(--color-text); }
.svc-sectors__all:hover span[data-k] { text-decoration: underline; text-underline-offset: 4px; }
/* ---------- sec-faq (shared) : sits right under the sectors band ---------- */
.svc-faq .faq__intro .link-tile { flex-shrink: 0; }
/* ---------- sec-related-services / cmp-service-link--boxed ---------- */
.svc-related { display: flex; flex-direction: column; gap: var(--spacing-10); padding-top: var(--spacing-24); border-top: 1px solid var(--color-border); }
.svc-related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-5); }
.svc-related__list > li { display: flex; }
.svc-related__card { display: flex; align-items: flex-start; gap: var(--spacing-5); width: 100%; min-height: 150px; padding: var(--spacing-7); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); transition: background-color var(--dur-fast) var(--ease); }
.svc-related__card:hover { background: var(--color-surface-subtle); }
.svc-related__text { display: flex; flex-direction: column; gap: var(--spacing-3); flex: 1 1 0; min-width: 0; }
.svc-related__desc { font-size: var(--text-body); line-height: var(--leading-body); }
.svc-related__caret { width: 24px; flex-shrink: 0; padding-top: var(--spacing-2); }
.svc-related__caret .icon { transition: transform var(--dur) var(--ease); }
.svc-related__card:hover .svc-related__caret .icon--dir { transform: translateX(3px); }
[dir="rtl"] .svc-related__card:hover .svc-related__caret .icon--dir { transform: scaleX(-1) translateX(3px); }
/* ---------- ≤ 1149: tablet ---------- */
@media (max-width: 1149px) {
.svc-scope__photo { width: 38%; }
.svc-journey__heading { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
.svc-steps, .svc-steps--5, .svc-steps--6 { --cols: 2; }
.svc-steps--6 .svc-step:nth-child(3n) .svc-step__line { visibility: visible; }
.svc-steps .svc-step:nth-child(2n) .svc-step__line, .svc-steps .svc-step--final .svc-step__line { visibility: hidden; }
.svc-step__text, .svc-steps--6 .svc-step__text { min-height: 0; }
.svc-cred { flex-direction: column; gap: var(--spacing-10); }
.svc-cred__heading { width: auto; max-width: 640px; }
.svc-sectors__heading { flex-direction: column; align-items: flex-start; gap: var(--spacing-6); }
.svc-sectors__tags { width: auto; }
.svc-sectors__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-related__list { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); }
}
/* ---------- ≤ 899: mobile layout (Paper 12KM-0) ---------- */
@media (max-width: 899px) {
.svc-hero { height: 760px; }
.svc-hero__content { padding-bottom: var(--spacing-24); }
.svc-hero__accent { display: block; }
.svc-hero__lead { width: auto; padding-top: var(--spacing-5); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.svc-hero__actions { gap: var(--spacing-2); padding-top: var(--spacing-6); }
.svc-hero__actions .btn { flex: 1 1 auto; }
.svc-hero__caption { inset-inline-start: var(--page-pad); max-width: none; }
.svc-hero__veil { background-image:
linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 86%, transparent) 0%, color-mix(in oklab, var(--color-primary) 20%, transparent) 18%, transparent 40%),
linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 96%, transparent) 0%, color-mix(in oklab, var(--color-primary) 65%, transparent) 30%, transparent 78%); }
.svc-scope { flex-direction: column; gap: var(--spacing-8); }
.svc-scope__photo { order: -1; width: 100%; height: 400px; }
.svc-scope__credit { bottom: var(--spacing-5); inset-inline: var(--spacing-5); }
.svc-scope__text { gap: var(--spacing-8); }
.svc-scope__heading { gap: var(--spacing-4); }
.svc-scope__intro { max-width: none; }
.svc-scope__row { flex-direction: column; gap: var(--spacing-2); padding-block: var(--spacing-5); }
.svc-scope__row-title { width: auto; }
.svc-scope--formation .svc-scope__photo img { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; object-position: 100% 0%; }
.svc-scope--visa .svc-scope__photo img { object-position: 0% 0%; }
.svc-journey { gap: var(--spacing-10); }
.svc-steps, .svc-steps--5, .svc-steps--6 { display: flex; flex-direction: column; gap: 0; }
.svc-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto; column-gap: var(--spacing-4); row-gap: var(--spacing-5); }
.svc-step:not(.svc-step--final) { padding-bottom: var(--spacing-10); }
.svc-step__marker { grid-column: 1; grid-row: 1 / span 2; flex-direction: column; width: 48px; margin-bottom: calc(var(--spacing-10) * -1); }
.svc-step--final .svc-step__marker { margin-bottom: 0; }
.svc-step__num { width: 48px; height: 48px; }
.svc-step__line, .svc-steps .svc-step:nth-child(n) .svc-step__line { visibility: visible; flex: 1 1 auto; width: 0; height: auto; min-height: 24px; border-top: 0; border-inline-start: 2px dotted var(--color-border-inverse-strong); }
.svc-steps .svc-step--final .svc-step__line { display: none; }
.svc-step__text { grid-column: 2; gap: var(--spacing-2); padding-top: var(--spacing-3); padding-inline-end: 0; }
.svc-step__provide { grid-column: 2; padding-top: var(--spacing-4); padding-inline-end: 0; }
.svc-receive { grid-column: 2; padding: var(--spacing-5); }
.svc-cred__heading { gap: var(--spacing-4); }
.svc-cred { gap: var(--spacing-8); }
.svc-cred__badges { gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-4); }
.svc-cred__badge-list { grid-template-columns: minmax(0, 1fr); }
.svc-badge { min-height: 0; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); }
.svc-member { flex-direction: column; gap: var(--spacing-1); }
.svc-sectors { gap: var(--spacing-4); padding-bottom: 0; }
.svc-sectors__heading { padding-bottom: var(--spacing-4); }
.svc-sectors__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-logo { height: 84px; }
.svc-logo__img { width: calc(var(--lw) * 0.71); height: calc(var(--lh) * 0.71); }
.svc-related { gap: var(--spacing-8); padding-top: var(--spacing-section); }
.svc-related__card { min-height: 0; padding: var(--spacing-5); gap: var(--spacing-4); }
.svc-related__desc { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
}
/* ---------- < 680: phone framing of the hero photos (Paper mobile artboards: cover + position) ---------- */
@media (max-width: 679px) {
.svc-hero--audit .svc-hero__photo img { --pos: 72% 50%; }
.svc-hero--advisory .svc-hero__photo img { --pos: 70% 50%; }
.svc-hero--tax .svc-hero__photo img { --pos: 22% 50%; }
.svc-hero--accounting .svc-hero__photo img { --pos: 32% 50%; }
.svc-hero--marketEntry .svc-hero__photo img { --pos: 44% 50%; }
.svc-hero--eor .svc-hero__photo img { --pos: 15% 50%; }
.svc-hero--formation .svc-hero__photo img { inset: auto; left: 70%; top: 100%; height: 125%; width: auto; min-width: 100%; max-width: none; transform: translate(-70%, -100%); object-position: 70% 100%; }
}
/* 43-about.css */
/* Our Firm — Paper: Our Firm › 01 — Our Firm · Desktop 1440 (10LQ-0) / Mobile 390 (12HD-0).
Profile cards (.team-card, .team-grid) live in 44-team.css. */
/* Desktop / mobile text fragments (mobile keys under 680px) */
.firm-only-mobile { display: none; }
@media (max-width: 679px) {
.firm-only-desktop { display: none; }
.firm-only-mobile { display: inline; }
}
/* Section heading row: title + text link (cmp-section-heading); link moves under the content on mobile */
.page-about .firm-pillars, .page-about .firm-leaders { display: flex; flex-direction: column; }
.firm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-8); }
.firm-head__link { flex-shrink: 0; }
/* ---------- 01 / sec-page-intro--inverse ---------- */
.firm-hero {
display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-16);
padding: var(--spacing-24) var(--page-pad);
}
.firm-hero__text { display: flex; flex-direction: column; gap: var(--spacing-7); flex: 0 1 760px; min-width: 0; animation: firm-in var(--dur-slow) var(--ease) both; }
.firm-hero__title { color: var(--color-text-inverse); }
.firm-hero__lead { max-width: 680px; color: var(--color-text-inverse-muted); }
.firm-hero__actions { display: flex; flex-direction: column; gap: var(--spacing-3); flex: 0 0 280px; animation: firm-in var(--dur-slow) var(--ease) 120ms both; }
.firm-hero__actions .btn { justify-content: space-between; width: 100%; }
@keyframes firm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1149px) {
.firm-hero { flex-direction: column; align-items: flex-start; gap: var(--spacing-8); }
.firm-hero__text { flex: none; }
.firm-hero__actions { flex: none; width: 100%; max-width: 420px; }
}
@media (max-width: 679px) {
.firm-hero { padding-top: var(--spacing-12); padding-bottom: var(--spacing-section); }
.firm-hero__text { gap: var(--spacing-5); }
.firm-hero__accent { display: block; }
.firm-hero__actions { max-width: none; }
}
/* ---------- 02 / sec-key-figures (cmp-figure-tile, cmp-badge) ---------- */
.firm-figures { display: flex; gap: var(--spacing-3); padding: var(--spacing-section) var(--page-pad) 0; background: var(--color-background); }
/* Same layout as the Home figures (client review, 2026-10-22): figures right above their labels, larger badges */
.firm-figures__feature {
display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-3);
flex: 0 0 500px; padding: var(--spacing-10) var(--spacing-8); background: var(--color-surface-inverse);
}
.firm-figures__numeral { color: var(--color-accent); }
.firm-figures__feature-label { max-width: 360px; color: var(--color-text-inverse); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.firm-figures__side { display: flex; flex-direction: column; gap: var(--spacing-3); flex: 1 1 0; min-width: 0; }
.firm-figures__row { display: flex; gap: var(--spacing-3); }
.firm-figure {
display: flex; flex-direction: column; gap: var(--spacing-2);
flex: 1 1 0; min-width: 0; padding: var(--spacing-7); background: var(--color-surface);
}
.firm-figure__value { color: var(--color-text); }
.firm-figure__label { color: var(--color-text-muted); font-size: var(--text-body); line-height: var(--leading-body); }
.firm-accred { display: flex; flex-direction: column; gap: var(--spacing-5); padding: var(--spacing-7); background: var(--color-surface-muted); }
.firm-accred__title { color: var(--color-text); }
.firm-accred__list { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.firm-badge {
display: flex; align-items: center; gap: var(--spacing-4); width: calc(50% - 4px); min-height: 80px;
padding: var(--spacing-4) var(--spacing-5); background: var(--color-surface); border: 1px solid var(--color-border);
}
.firm-badge__check {
display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0;
border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-accent);
}
.firm-badge__text { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
.firm-badge__name { color: var(--color-text); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-medium); }
.firm-badge__label { color: var(--color-text-muted); }
@media (max-width: 1149px) {
.firm-figures { flex-direction: column; }
.firm-figures__feature { flex: none; }
}
@media (max-width: 679px) {
.firm-figures { gap: var(--spacing-2); }
.firm-figures__side { display: contents; }
.firm-figures__feature { padding: var(--spacing-8) var(--spacing-6); }
.firm-figures__feature-label { font-size: var(--text-body); line-height: var(--leading-body); }
.firm-figures__row { gap: var(--spacing-2); }
.firm-figure { padding: var(--spacing-5) var(--spacing-4); }
.firm-figure__label { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.firm-accred { gap: var(--spacing-4); padding: var(--spacing-6) var(--spacing-4); }
.firm-accred__list { flex-direction: column; }
.firm-badge { width: 100%; min-height: 0; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); }
}
/* ---------- 03 / sec-about ---------- */
.firm-about { display: flex; flex-direction: column; gap: var(--spacing-10); }
.firm-about__text { display: flex; align-items: flex-start; gap: var(--spacing-16); }
.firm-about__lead { flex: 0 1 600px; min-width: 0; color: var(--color-text); }
.firm-about__more { display: flex; flex-direction: column; gap: var(--spacing-4); flex: 1 1 0; min-width: 0; padding-top: var(--spacing-1); }
@media (max-width: 899px) {
.firm-about { gap: var(--spacing-6); }
.firm-about__text { flex-direction: column; gap: var(--spacing-4); }
.firm-about__lead { flex: none; }
.firm-about__more { padding-top: 0; }
}
/* ---------- 04 / sec-pillars ---------- */
.firm-pillars { gap: var(--spacing-12); }
.firm-pillars__grid { display: flex; border-top: 1px solid var(--color-border-strong); }
.firm-pillar { display: flex; flex-direction: column; gap: var(--spacing-6); flex: 1 1 0; min-width: 0; padding-top: var(--spacing-8); }
.firm-pillar:first-child { padding-inline-end: var(--spacing-12); border-inline-end: 1px solid var(--color-border); }
.firm-pillar:last-child { padding-inline-start: var(--spacing-12); }
.firm-pillar__head { display: flex; align-items: center; gap: var(--spacing-4); color: var(--color-text); }
.firm-pillar__name { flex: 1 1 0; min-width: 0; }
.firm-pillar__count { color: var(--color-text-muted); flex-shrink: 0; }
.firm-pillar__list { border-bottom: 1px solid var(--color-border); }
.firm-pillar__item { display: flex; flex-direction: column; gap: var(--spacing-1); padding-block: var(--spacing-5); border-top: 1px solid var(--color-border); }
@media (max-width: 899px) {
.firm-pillars { gap: var(--spacing-10); }
.firm-pillars .firm-head { display: contents; }
.firm-pillars .firm-head__link { order: 2; }
.firm-pillars__grid { flex-direction: column; gap: var(--spacing-12); border-top: 0; order: 1; }
.firm-pillar, .firm-pillar:first-child, .firm-pillar:last-child {
padding: var(--spacing-6) 0 0; gap: var(--spacing-5); border-inline-end: 0; border-top: 1px solid var(--color-border-strong);
}
.firm-pillar__head { gap: var(--spacing-3); }
.firm-pillar__item { padding-block: var(--spacing-4); }
}
/* ---------- 05 / sec-timeline (cmp-milestone, --feature) ---------- */
.firm-history { display: flex; flex-direction: column; gap: var(--spacing-14); }
.firm-tl { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--spacing-2); }
/* Rail: 1px border-inverse-strong through the square markers */
.firm-tl::before { content: ""; position: absolute; top: 5px; inset-inline: 0; height: 1px; background: var(--color-border-inverse-strong); }
.firm-tl__item { position: relative; display: flex; flex-direction: column; gap: var(--spacing-6); min-width: 0; }
.firm-tl__marker { position: relative; width: 12px; height: 12px; flex-shrink: 0; background: var(--color-surface-inverse); border: 1px solid var(--color-accent); }
.firm-tl__item--feature .firm-tl__marker { background: var(--color-accent); }
.firm-tl__card {
display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-10); flex: 1 1 auto;
min-height: 300px; padding: var(--spacing-7) var(--spacing-6); background: var(--color-surface-inverse-raised);
}
.firm-tl__year { color: var(--color-accent); overflow-wrap: normal; }
.firm-tl__text { color: var(--color-text-inverse-muted); }
.firm-tl__item--feature .firm-tl__card { background: var(--color-accent); }
.firm-tl__item--feature .firm-tl__year, .firm-tl__item--feature .firm-tl__text { color: var(--color-on-accent); }
/* Arabic decades (التسعينيات) are wider than the Latin years: next size down to stay on one line */
html[lang="ar"] .firm-tl__year { font-size: var(--text-heading-3); line-height: var(--leading-heading-2); }
/* Six columns need ≥1280px for the decades (1990s, التسعينيات) to stay on one line; tighter padding up to 1439px */
@media (max-width: 1439px) { .firm-tl__card { padding-inline: var(--spacing-5); } }
@media (max-width: 1279px) {
.firm-tl { display: flex; flex-direction: column; gap: var(--spacing-2); }
.firm-tl::before { top: 0; bottom: 0; inset-inline: 5px auto; width: 1px; height: auto; }
.firm-tl__item { flex-direction: row; align-items: center; gap: var(--spacing-4); }
.firm-tl__card { min-height: 136px; flex: 1 1 0; gap: var(--spacing-6); padding: var(--spacing-6) var(--spacing-5); }
html[lang="ar"] .firm-tl__year { font-size: var(--text-heading-2); }
}
@media (max-width: 899px) { .firm-history { gap: var(--spacing-10); } }
/* ---------- 06 / sec-numbered-list ---------- */
.firm-why { display: flex; flex-direction: column; gap: var(--spacing-12); }
.firm-why__list { border-bottom: 1px solid var(--color-border); }
.firm-why__row { display: flex; align-items: baseline; gap: var(--spacing-6); padding-block: var(--spacing-7); border-top: 1px solid var(--color-border); }
.firm-why__num {
width: 120px; flex-shrink: 0; color: var(--color-text-accent);
font-size: var(--text-heading-3); line-height: var(--leading-heading-3); letter-spacing: var(--tracking-snug);
}
.firm-why__text { display: flex; align-items: baseline; gap: var(--spacing-6); flex: 1 1 0; min-width: 0; }
.firm-why__title { flex: 0 0 560px; min-width: 0; color: var(--color-text); }
.firm-why__detail { flex: 1 1 0; min-width: 0; color: var(--color-text-muted); font-size: var(--text-body); line-height: var(--leading-body); }
@media (max-width: 1149px) {
.firm-why__num { width: 64px; }
.firm-why__title { flex: 1 1 0; }
}
@media (max-width: 679px) {
.firm-why { gap: var(--spacing-8); }
.firm-why__row { gap: var(--spacing-4); padding-block: var(--spacing-5); }
.firm-why__num { width: 40px; font-size: var(--text-title); line-height: var(--leading-title); }
.firm-why__text { flex-direction: column; gap: var(--spacing-2); }
.firm-why__title { flex: none; }
.firm-why__detail { flex: none; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
}
/* ---------- 07 / sec-card-grid (leadership) ---------- */
@media (max-width: 899px) {
.firm-leaders .firm-head { display: contents; }
.firm-leaders .team-grid { padding-top: var(--spacing-8); }
.firm-leaders .firm-head__link { order: 2; margin-top: var(--spacing-8); }
}
/* ---------- 08 / sec-credentials ---------- */
.firm-cred { display: flex; gap: var(--spacing-20); }
.firm-cred__intro { display: flex; flex-direction: column; gap: var(--spacing-6); flex: 0 0 420px; min-width: 0; }
.firm-cred__intro h2 { color: var(--color-text); }
.firm-cred__list { flex: 1 1 0; min-width: 0; }
.firm-cred__label { padding-bottom: var(--spacing-3); }
.firm-cred__list ul { border-bottom: 1px solid var(--color-border); }
.firm-cred__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-6); padding-block: var(--spacing-4); border-top: 1px solid var(--color-border); }
.firm-cred__name { color: var(--color-text); min-width: 0; }
.firm-cred__rel { flex-shrink: 0; text-align: end; }
@media (max-width: 1149px) { .firm-cred { gap: var(--spacing-12); } .firm-cred__intro { flex-basis: 340px; } }
@media (max-width: 899px) {
.firm-cred { flex-direction: column; gap: var(--spacing-10); }
.firm-cred__intro { flex: none; gap: var(--spacing-5); }
.firm-cred__row { flex-direction: column; align-items: flex-start; gap: var(--spacing-1); }
.firm-cred__rel { text-align: start; }
}
/* ---------- 09 / sec-card-grid--dark (cmp-network-card; --list on mobile) ---------- */
.firm-networks h2 { color: var(--color-text-inverse); }
@media (max-width: 679px) {
.firm-networks .net-grid { flex-direction: column; padding-top: var(--spacing-8); }
.firm-networks .net-card { gap: var(--spacing-3); padding: var(--spacing-5) var(--spacing-4); }
.firm-networks .net-card__logo { height: 44px; }
/* Logos at 66% of the grid size, as in Paper's cmp-network-card--list */
.firm-networks .net-logo { zoom: 0.662; }
.firm-networks .net-card__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--spacing-3); row-gap: var(--spacing-1); }
.firm-networks .net-card__desc { grid-column: 1 / -1; padding-top: 0; }
.firm-networks .net-card__rel { text-align: end; }
}
/* ---------- 10 / sec-offices (cmp-office--light) ---------- */
.firm-offices { display: flex; flex-direction: column; gap: var(--spacing-12); }
.firm-offices__grid { display: flex; gap: var(--spacing-3); }
.firm-office { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; background: var(--color-surface); }
.firm-office__photo { position: relative; height: 360px; flex-shrink: 0; overflow: clip; background: var(--color-surface-inverse); }
.firm-office__photo img {
position: absolute; top: 0; inset-inline-start: -24px; width: calc(100% + 48px); max-width: none; height: 100%;
object-fit: cover; object-position: 50% 40%; filter: saturate(75%);
}
.firm-office__photo--empty { display: flex; align-items: flex-end; padding: var(--spacing-5); background: var(--color-surface-subtle); color: var(--color-text-muted); }
.firm-office__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-8); }
.firm-office__city { display: flex; align-items: baseline; gap: var(--spacing-4); color: var(--color-text); }
@media (max-width: 899px) {
.firm-offices { gap: var(--spacing-8); }
.firm-offices__grid { flex-direction: column; }
.firm-office__photo { height: 240px; }
.firm-office__body { padding: var(--spacing-6); }
}
/* ---------- 11 / sec-contact: offices are shown above, so the details keep the contact line only ---------- */
@media (min-width: 1150px) {
.page-about .contact-sec__col--main { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--spacing-10); }
.page-about .contact-sec__col--main > * { padding: 0; }
}
/* 44-team.css */
/* Team — Paper: Team › 02 — Team · Desktop 1440 (10DP-0) / Mobile 390 (12HE-0).
Also holds cmp-profile-card (.team-card), reused by Our Firm (43-about.css) — registry: cmp-profile-card. */
/* ---------- cmp-profile-card ---------- */
.team-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.team-card__photo {
display: flex; align-items: flex-end; width: 100%; height: 300px; flex-shrink: 0;
padding: var(--spacing-4); background: var(--color-surface-muted); color: var(--color-text-muted);
}
.team-card__name { padding-top: var(--spacing-5); width: 100%; color: var(--color-text); }
.team-card__role {
width: 100%; padding-top: var(--spacing-1); color: var(--color-text-accent);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
}
.team-card__bio {
max-width: 260px; padding-top: var(--spacing-3); color: var(--color-text-muted);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
}
.team-card--even .team-card__bio { min-height: 78px; }
.team-card__action { display: flex; padding-top: var(--spacing-5); }
/* cmp-button--quiet: border-strong outline on light, 44px */
.team-card__btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2);
min-height: 44px; min-width: 116px; padding: var(--spacing-2) var(--spacing-5);
border: 1px solid var(--color-border-strong); color: var(--color-text);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
transition: background-color var(--dur-fast) var(--ease);
}
.team-card__btn:hover { background: var(--color-surface); }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-7); padding-top: var(--spacing-12); }
@media (max-width: 1149px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-5); row-gap: var(--spacing-8); } }
@media (max-width: 679px) {
.team-card__photo { height: 200px; padding: var(--spacing-3); }
.team-card__name { padding-top: var(--spacing-3); }
.team-card__role { font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-wide); }
.team-card__bio { max-width: 100%; padding-top: var(--spacing-2); font-size: var(--text-caption); line-height: var(--leading-caption); }
.team-card--even .team-card__bio { min-height: 0; }
.team-card__btn { padding-inline: var(--spacing-3); }
}
/* ---------- 01 / sec-page-intro ---------- */
.team-intro { padding: var(--spacing-16) var(--page-pad) var(--spacing-8); background: var(--color-background); }
.team-intro__inner { display: flex; align-items: flex-end; gap: var(--spacing-24); }
.team-intro__title { flex: 0 1 600px; min-width: 0; color: var(--color-text); animation: team-in var(--dur-slow) var(--ease) both; }
.team-intro__lead { flex: 0 1 544px; min-width: 0; padding-bottom: var(--spacing-1); color: var(--color-text-muted); animation: team-in var(--dur-slow) var(--ease) 80ms both; }
@keyframes team-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
.team-intro { padding-top: var(--spacing-10); padding-bottom: var(--spacing-7); }
.team-intro__inner { flex-direction: column; align-items: flex-start; gap: var(--spacing-5); }
.team-intro__title, .team-intro__lead { flex: none; }
}
/* ---------- 02 / sec-tab-index--text (cmp-tab--text, used as group filters) ---------- */
.team-tabs { padding-inline: var(--page-pad); background: var(--color-background); }
.team-tabs__row { display: flex; border-bottom: 1px solid var(--color-border); }
.team-tab {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-1); flex: 1 1 0; min-width: 0;
padding: var(--spacing-6); margin-bottom: -1px; text-align: start;
border-bottom: 2px solid transparent; color: var(--color-text);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.team-tab__label { font-size: var(--text-subtitle); line-height: var(--leading-subtitle); letter-spacing: var(--tracking-snug); }
.team-tab__count { font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
.team-tab:hover { border-bottom-color: var(--color-border-strong); }
.team-tab[aria-pressed="true"] { border-bottom-color: var(--color-primary); }
.team-tab:focus-visible { outline-offset: -2px; }
@media (max-width: 899px) {
.team-tabs { padding-inline-end: 0; padding-top: var(--spacing-4); }
.team-tabs__row { overflow-x: auto; scrollbar-width: none; border-bottom: 0; }
.team-tabs__row::-webkit-scrollbar { display: none; }
/* The 1px rule spans the tabs only, as in Paper (horizontal scroll row). */
.team-tabs__row { background: linear-gradient(var(--color-border), var(--color-border)) bottom / 100% 1px no-repeat; }
.team-tab { flex: none; padding: var(--spacing-4) var(--spacing-3); margin-bottom: 0; }
.team-tab:first-child { padding-inline-start: 0; }
.team-tab:last-child { margin-inline-end: var(--spacing-gutter); }
}
/* ---------- 03 / Groups (sec-card-grid + cmp-group-heading) ---------- */
.team-groups {
display: flex; flex-direction: column; gap: var(--spacing-24);
padding: var(--spacing-16) var(--page-pad) var(--spacing-section); background: var(--color-background);
}
.team-group { display: flex; flex-direction: column; }
/* Rule between visible groups only (filters hide groups with [hidden]) */
.team-group:not([hidden]) ~ .team-group:not([hidden]) { padding-top: var(--spacing-8); border-top: 1px solid var(--color-border); }
.team-group__head { display: flex; align-items: baseline; gap: var(--spacing-4); flex-wrap: wrap; }
.team-group__count { color: var(--color-text-muted); }
@media (max-width: 899px) {
.team-groups { padding-top: var(--spacing-10); gap: var(--spacing-12); }
.team-group__head { gap: var(--spacing-3); }
.team-group .team-grid { padding-top: var(--spacing-6); }
}
/* ---------- 04 / sec-contact: Team keeps the gold button only (Paper TM and TMm) ---------- */
/* 45-doing-business.css */
/* Doing Business in Libya — Paper p-F-0 (10CM-0 desktop 1440, 12JO-0 mobile 390) */
.page-db .db-only-mobile { display: none; }
@media (max-width: 679px) {
.page-db .db-only-desktop { display: none; }
.page-db .db-only-mobile { display: inline; }
}
/* ---------- 01 · sec-hero--service ---------- */
.db-hero { position: relative; min-height: 800px; display: flex; flex-direction: column; justify-content: flex-end; overflow: clip; }
.db-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.db-hero__veil { position: absolute; inset: 0; background-image:
linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 55%, transparent) 0%, transparent 20%),
linear-gradient(in oklab 90deg, color-mix(in oklab, var(--color-primary) 75%, transparent) 0%, color-mix(in oklab, var(--color-primary) 45%, transparent) 40%, transparent 64%),
linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 60%, transparent) 0%, transparent 42%); }
[dir="rtl"] .db-hero__veil { transform: scaleX(-1); }
.db-hero__content { position: relative; padding-inline: var(--page-pad); padding-top: 88px; padding-bottom: var(--spacing-20); animation: db-rise var(--dur-slow) var(--ease) both; }
.db-hero__lead { width: 640px; max-width: 100%; padding-top: var(--spacing-6); }
.db-hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3); padding-top: var(--spacing-8); }
.db-hero__caption { position: absolute; bottom: var(--spacing-6); inset-inline-end: var(--page-pad); max-width: calc(100% - 2 * var(--spacing-gutter)); }
@keyframes db-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 679px) {
.db-hero { min-height: 844px; }
.db-hero__photo img { object-position: 58% 50%; }
.db-hero__veil { background-image:
linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 86%, transparent) 0%, color-mix(in oklab, var(--color-primary) 20%, transparent) 18%, transparent 40%),
linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 96%, transparent) 0%, color-mix(in oklab, var(--color-primary) 78%, transparent) 42%, transparent 86%); }
.db-hero__content { padding-bottom: var(--spacing-24); }
.db-hero__lead { padding-top: var(--spacing-5); }
.db-hero__actions { flex-direction: column; gap: var(--spacing-2); padding-top: var(--spacing-6); }
.db-hero__actions .btn { width: 100%; }
.db-hero__caption { inset-inline-start: var(--spacing-gutter); inset-inline-end: var(--spacing-gutter); max-width: none; }
}
/* ---------- 02 · sec-journey--timeline (draft) ---------- */
.db-route { display: flex; flex-direction: column; gap: var(--spacing-16); }
.db-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--spacing-6); }
.db-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; }
.db-step__body { display: contents; }
.db-step__rail { display: flex; align-items: center; }
.db-step__num {
display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px;
border: 1px solid var(--color-border-inverse-strong); color: var(--color-accent);
font-size: var(--text-title); line-height: var(--leading-title); letter-spacing: var(--tracking-snug);
}
.db-step__line { flex: 1 1 0; height: 0; border-top: 2px dotted var(--color-border-inverse-strong); }
.db-step--final .db-step__num { background: var(--color-accent); border-color: transparent; color: var(--color-on-accent); }
.db-step--final .db-step__line { display: none; }
.db-step__text { display: flex; flex-direction: column; gap: var(--spacing-3); min-height: 240px; padding-inline-end: var(--spacing-6); }
.db-step__links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3); padding-top: var(--spacing-5); padding-inline-end: var(--spacing-6); border-top: 1px solid var(--color-border-inverse); }
.db-step__link {
display: inline-flex; align-items: flex-start; gap: var(--spacing-2);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium); color: var(--color-text-inverse);
}
.db-step__link .icon { margin-top: 3px; transition: transform var(--dur) var(--ease); }
.db-step__link:hover span[data-k] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.db-step__link:hover .icon--dir { transform: translate(2px, -2px); }
[dir="rtl"] .db-step__link:hover .icon--dir { transform: scaleX(-1) translate(2px, -2px); }
@media (max-width: 1149px) {
.db-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--spacing-6); }
.db-step:nth-child(3) .db-step__line { display: none; }
.db-step:nth-child(n + 4) .db-step__rail { margin-top: var(--spacing-10); }
.db-step__text { min-height: 0; }
}
@media (max-width: 899px) {
.db-route { gap: var(--spacing-10); }
.db-steps { display: flex; flex-direction: column; row-gap: 0; }
.db-step { display: flex; gap: var(--spacing-5); }
.db-step:nth-child(n + 4) .db-step__rail { margin-top: 0; }
.db-step__rail { flex-direction: column; width: 48px; flex-shrink: 0; }
.db-step__num { width: 48px; height: 48px; }
.db-step__line { width: 0; height: auto; border-top: 0; border-inline-start: 2px dotted var(--color-border-inverse-strong); }
.db-step:nth-child(3) .db-step__line { display: block; }
.db-step--final .db-step__line { display: none; }
.db-step__body { display: flex; flex-direction: column; gap: var(--spacing-3); flex: 1 1 0; min-width: 0; padding-top: var(--spacing-4); padding-bottom: var(--spacing-10); }
.db-step--final .db-step__body { padding-bottom: 0; }
.db-step__text { padding-inline-end: 0; }
.db-step__links { gap: 0; padding-top: var(--spacing-2); padding-inline-end: 0; }
.db-step__link { align-items: center; min-height: 44px; }
.db-step__link .icon { margin-top: 0; }
}
/* ---------- 03 · sec-card-grid + cmp-situation-card + cmp-responsibility-split (draft) ---------- */
.db-eor { display: flex; flex-direction: column; gap: var(--spacing-12); }
.db-eor__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-12); }
.db-eor__link { flex-shrink: 0; gap: var(--spacing-5); }
.db-situations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-6); }
.db-situation { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-8); background: var(--color-surface); }
.db-split { display: flex; background: var(--color-surface-subtle); }
.db-split__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-6); padding: var(--spacing-12); }
.db-split__col + .db-split__col { border-inline-start: 1px solid var(--color-border); }
.db-split__list li { padding-block: var(--spacing-3); border-top: 1px solid var(--color-border); }
.db-split__list li:last-child { border-bottom: 1px solid var(--color-border); }
@media (max-width: 1149px) {
.db-situations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
.db-eor { gap: var(--spacing-10); }
.db-eor__head { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
.db-situations { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); }
.db-situation { gap: var(--spacing-3); padding: var(--spacing-6); }
.db-split { flex-direction: column; }
.db-split__col { gap: var(--spacing-5); padding: var(--spacing-6); }
.db-split__col + .db-split__col { border-inline-start: 0; padding-top: var(--spacing-4); }
}
/* ---------- 04 · sec-card-grid--dark · condensed (cmp-network-card without description) ---------- */
.db-nets .net-card { min-height: 0; }
@media (max-width: 679px) {
.db-nets .net-grid { flex-direction: column; padding-top: var(--spacing-8); }
.db-nets .net-card { width: 100%; gap: var(--spacing-3); padding: var(--spacing-5) var(--spacing-4); }
.db-nets .net-card__logo { height: 44px; }
.db-nets .net-logo { zoom: 0.662; }
.db-nets .net-card__text { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--spacing-3); }
.db-nets .net-card__rel { text-align: end; }
.db-nets .net-card__ext { display: none; }
}
/* ---------- 05 · sec-logo-strip--sectors (draft), chips only ---------- */
.db-sectors__row { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-20); }
.db-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); width: 640px; max-width: 100%; flex-shrink: 0; }
.db-chip { padding: var(--spacing-2) var(--spacing-4); background: var(--color-surface); color: var(--color-text); }
@media (max-width: 1149px) {
.db-sectors__row { flex-direction: column; align-items: flex-start; gap: var(--spacing-6); }
.db-chips { width: auto; flex-shrink: 1; }
}
/* 46-insights.css */
/* Insights list (p-G-0: 10GC-0 / 12M2-0) and article template (p-H-0: 114L-0 / 1374-0) */
.page-ins .ins-only-mobile { display: none; }
@media (max-width: 679px) {
.page-ins .ins-only-desktop { display: none; }
.page-ins .ins-only-mobile { display: flex; }
}
/* Shared: photo veil (bottom, 120 px) and caption (cmp-media-caption) */
.ins-veil { position: absolute; inset-inline: 0; bottom: 0; height: 120px; background-image: linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 60%, transparent) 0%, transparent 100%); }
.ins-veil--card, .art-header .ins-veil { background-image: linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 72%, transparent) 0%, transparent 100%); }
.ins-caption { position: absolute; bottom: var(--spacing-6); inset-inline-start: var(--spacing-8); inset-inline-end: var(--spacing-8); }
.ins-meta { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--spacing-2); }
.ins-meta--stack { flex-direction: column; align-items: flex-start; row-gap: var(--spacing-1); }
.photo > img { transition: transform var(--dur-slow) var(--ease); }
/* ---------- 01 · sec-page-intro ---------- */
.ins-intro { padding-top: var(--spacing-24); padding-bottom: var(--spacing-12); }
.ins-intro__row { display: flex; align-items: flex-end; gap: var(--spacing-24); }
.ins-intro__row h1 { flex: 0 1 724px; animation: ins-rise var(--dur-slow) var(--ease) both; }
.ins-intro__lead { flex: 0 1 420px; padding-bottom: var(--spacing-1); animation: ins-rise var(--dur-slow) var(--ease) 80ms both; }
@keyframes ins-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ---------- 02 · cmp-filter-chip (draft) ---------- */
.ins-list { padding-inline: var(--page-pad); padding-bottom: var(--spacing-section); }
.ins-filter { padding-bottom: var(--spacing-12); }
.ins-filter__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); padding-top: var(--spacing-8); border-top: 1px solid var(--color-border); }
.ins-chip {
display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--spacing-5); white-space: nowrap;
border: 1px solid var(--color-border-strong); color: var(--color-text);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ins-chip:hover { background: var(--color-surface); }
.ins-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
/* ---------- 03 · cmp-article-card--featured (draft) ---------- */
.ins-articles { display: flex; flex-direction: column; gap: var(--spacing-16); }
.ins-featured { display: flex; min-height: 480px; background: var(--color-surface); color: var(--color-text); transition: background-color var(--dur-fast) var(--ease); }
.ins-featured__photo { flex: 0 0 58.07%; min-height: 480px; }
.ins-featured__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-8); padding: var(--spacing-12); }
.ins-featured__text { display: flex; flex-direction: column; gap: var(--spacing-5); }
.ins-featured__foot { display: flex; flex-direction: column; gap: var(--spacing-4); padding-top: var(--spacing-6); border-top: 1px solid var(--color-border); }
.ins-read { gap: var(--spacing-5); }
.ins-featured:hover .photo > img, .ins-card:hover .photo > img { transform: scale(1.03); }
.ins-featured:hover .ins-read span[data-k], .ins-featured:hover .ins-featured__title,
.ins-card:hover .ins-card__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ins-featured:hover .ins-read .icon--dir { transform: translateX(3px); }
[dir="rtl"] .ins-featured:hover .ins-read .icon--dir { transform: scaleX(-1) translateX(3px); }
/* ---------- 04 · sec-card-grid · cmp-article-card--media (draft) ---------- */
.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-7); }
.ins-card { display: flex; flex-direction: column; color: var(--color-text); }
.ins-card__photo { height: 340px; flex-shrink: 0; }
.ins-card__photo .ins-caption { bottom: var(--spacing-5); inset-inline-start: var(--spacing-6); inset-inline-end: var(--spacing-6); }
/* Tripoli old town: Paper crops the photo at 125 % height, anchored at 40 % */
.ins-card__photo--accounting > img { object-position: 40% 50%; transform: scale(1.25); transform-origin: 40% 50%; }
.ins-card:hover .ins-card__photo--accounting > img { transform: scale(1.29); }
.ins-card__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-8); padding-top: var(--spacing-6); }
.ins-card__text { display: flex; flex-direction: column; gap: var(--spacing-3); }
.ins-card__summary { max-width: 520px; padding-top: var(--spacing-1); }
.ins-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); padding-top: var(--spacing-4); border-top: 1px solid var(--color-border); }
.ins-card__foot .icon, .art-more__foot .icon { transition: transform var(--dur) var(--ease); }
.ins-card:hover .ins-card__foot .icon--dir, .art-more__card:hover .icon--dir { transform: translate(2px, -2px); }
[dir="rtl"] .ins-card:hover .ins-card__foot .icon--dir, [dir="rtl"] .art-more__card:hover .icon--dir { transform: scaleX(-1) translate(2px, -2px); }
.ins-empty { padding-block: var(--spacing-6); }
@media (max-width: 1149px) {
.ins-intro__row { gap: var(--spacing-12); }
.ins-featured__content { padding: var(--spacing-8); }
}
@media (max-width: 899px) {
.ins-intro { padding-top: var(--spacing-10); padding-bottom: var(--spacing-7); }
.ins-intro__row { flex-direction: column; align-items: flex-start; gap: var(--spacing-5); }
.ins-intro__row h1, .ins-intro__lead { flex: none; }
.ins-featured { flex-direction: column; min-height: 0; }
.ins-featured__photo { flex: none; min-height: 0; height: 240px; }
.ins-featured__content { padding: var(--spacing-6); }
.ins-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-12); }
.ins-articles { gap: var(--spacing-12); }
.ins-card__photo { height: 228px; }
.ins-caption { inset-inline-start: var(--spacing-4); inset-inline-end: var(--spacing-4); bottom: var(--spacing-4); }
.ins-card__photo .ins-caption { inset-inline-start: var(--spacing-4); inset-inline-end: var(--spacing-4); bottom: var(--spacing-4); }
.ins-veil { height: 112px; background-image: linear-gradient(in oklab 0deg, color-mix(in oklab, var(--color-primary) 72%, transparent) 0%, transparent 100%); }
.ins-veil--card { height: 104px; }
.ins-card__body { padding-top: var(--spacing-5); gap: var(--spacing-6); }
}
@media (max-width: 679px) {
.ins-list { padding-bottom: var(--spacing-section); }
/* Filter row scrolls horizontally, last chip cut at the edge (registry › mobile) */
.ins-list { padding-inline: 0; }
.ins-filter { padding-bottom: var(--spacing-8); }
.ins-filter__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-top: 0; padding-top: 0; padding-inline: var(--spacing-gutter); }
.ins-filter__chips::-webkit-scrollbar { display: none; }
.ins-filter::before { content: ""; display: block; height: 1px; margin-inline: var(--spacing-gutter); margin-bottom: var(--spacing-6); background: var(--color-border); }
.ins-articles { padding-inline: var(--spacing-gutter); }
}
/* ---------- Article · sec-article-header (draft) ---------- */
.art-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; }
.art-header__text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-10); padding: var(--spacing-10) var(--spacing-16) var(--spacing-12); padding-inline-start: max(var(--spacing-gutter), calc(100% - var(--container-content) / 2)); animation: ins-rise var(--dur-slow) var(--ease) both; }
.art-crumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-2); min-height: 44px; }
.art-crumbs a { color: var(--color-text-muted); text-decoration: underline 1px; text-underline-offset: 4px; transition: color var(--dur-fast) var(--ease); }
.art-crumbs a:hover { color: var(--color-text); }
.art-header__title { display: flex; flex-direction: column; gap: var(--spacing-5); }
.art-meta { display: flex; flex-wrap: wrap; column-gap: var(--spacing-12); row-gap: var(--spacing-4); padding-top: var(--spacing-6); border-top: 1px solid var(--color-border); margin: 0; }
.art-meta > div { display: flex; flex-direction: column; gap: var(--spacing-1); }
.art-meta dd { margin: 0; }
.art-header__photo { min-height: 640px; }
@media (max-width: 899px) {
.art-header { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.art-header__photo { order: -1; min-height: 0; height: 280px; }
.art-header__text { gap: var(--spacing-6); padding: var(--spacing-4) var(--spacing-gutter) var(--spacing-10); }
.art-header .ins-caption { inset-inline-start: var(--spacing-gutter); inset-inline-end: var(--spacing-gutter); }
.art-meta { column-gap: var(--spacing-8); }
.art-meta > div { width: calc(50% - var(--spacing-4)); }
}
/* ---------- Article · sec-article-body (draft) + cmp-toc (draft) ---------- */
.art-body { padding-inline: var(--page-pad); padding-block: var(--spacing-24); }
.art-body__layout { display: flex; justify-content: center; }
.art-body__rail { display: none; }
.art-body__col { width: 680px; max-width: 100%; display: flex; flex-direction: column; gap: var(--spacing-12); }
.art-sec { display: flex; flex-direction: column; gap: var(--spacing-4); scroll-margin-top: var(--spacing-8); }
.art-runin { font-weight: var(--font-weight-medium); }
.art-list { display: flex; flex-direction: column; gap: var(--spacing-2); }
.art-list li { display: flex; gap: var(--spacing-4); }
.art-list li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin: 10px 5px 0; background: var(--color-primary); }
.art-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.art-steps__cell { display: flex; flex-direction: column; gap: var(--spacing-3); padding: var(--spacing-7); background: var(--color-surface); }
/* Work visas: numbered steps (numbers are ordinal, drawn by CSS: Latin digits in both languages) */
.art-body__col { counter-reset: art-step; }
.art-sec--step { counter-increment: art-step; }
.art-sec--step::before { content: counter(art-step, decimal-leading-zero); color: var(--color-text-accent); font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-wide); margin-bottom: calc(-1 * var(--spacing-2)); }
/* Inline contents (maquette): numbered list on 2 columns */
.art-toc { display: flex; flex-direction: column; gap: var(--spacing-4); padding-bottom: var(--spacing-10); border-bottom: 1px solid var(--color-border); }
.art-toc__list { counter-reset: toc; }
.art-toc__list--cols { columns: 2; column-gap: var(--spacing-7); }
.art-toc__list li { counter-increment: toc; break-inside: avoid; }
.art-toc__list a { display: flex; align-items: center; gap: var(--spacing-3); min-height: 40px; color: var(--color-text); }
.art-toc__list a::before { content: counter(toc, decimal-leading-zero); flex-shrink: 0; width: 24px; color: var(--color-text-accent); font-size: var(--text-label); line-height: var(--leading-label); letter-spacing: var(--tracking-wide); }
.art-toc__list a span[data-k] { text-decoration: underline 1px; text-underline-offset: 4px; transition: text-underline-offset var(--dur-fast) var(--ease); }
.art-toc__list a:hover span[data-k] { text-underline-offset: 6px; }
.art-toc__list a[aria-current="true"] { font-weight: var(--font-weight-medium); }
/* Sticky rail (≥ 1280 px): same contents, follows the reading once the inline list has scrolled away */
@media (min-width: 1280px) {
.art-body__layout { display: grid; grid-template-columns: minmax(0, 1fr) 680px minmax(0, 1fr); column-gap: var(--spacing-10); }
.art-body__rail { display: block; }
.art-rail { position: sticky; top: var(--spacing-8); max-width: 220px; display: flex; flex-direction: column; gap: var(--spacing-3); transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
.js .art-rail { opacity: 0; visibility: hidden; }
.js .art-rail.is-shown { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }
.art-rail__list { counter-reset: rail; display: flex; flex-direction: column; }
.art-rail__list li { counter-increment: rail; }
.art-rail__list a { display: flex; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); border-inline-start: 2px solid var(--color-border); color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.art-rail__list a::before { content: counter(rail, decimal-leading-zero); flex-shrink: 0; width: 20px; color: var(--color-text-accent); font-size: var(--text-label); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-wide); }
.art-rail__list a:hover { color: var(--color-text); }
.art-rail__list a[aria-current="true"] { color: var(--color-text); border-inline-start-color: var(--color-primary); }
}
@media (max-width: 899px) {
.art-body { padding-top: var(--spacing-10); padding-bottom: var(--spacing-12); }
.art-body__col { gap: var(--spacing-10); }
.art-toc { padding-bottom: var(--spacing-8); }
.art-toc__list--cols { columns: 1; }
.art-toc__list a { min-height: 44px; }
.art-steps { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Article · sec-related-services (draft) · cmp-service-link--boxed ---------- */
.art-related { display: flex; flex-direction: column; gap: var(--spacing-10); padding-top: var(--spacing-24); border-top: 1px solid var(--color-border); }
.art-related__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-5); }
.art-related__link { display: flex; align-items: flex-start; gap: var(--spacing-5); min-height: 150px; padding: var(--spacing-7); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); transition: background-color var(--dur-fast) var(--ease); }
.art-related__link:hover { background: var(--color-surface-subtle); }
.art-related__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-3); }
.art-related__caret { width: 24px; flex-shrink: 0; padding-top: var(--spacing-2); }
.art-related__caret .icon { transition: transform var(--dur) var(--ease); }
.art-related__link:hover .art-related__caret .icon { transform: translateX(3px); }
[dir="rtl"] .art-related__link:hover .art-related__caret .icon { transform: scaleX(-1) translateX(3px); }
@media (max-width: 1149px) { .art-related__links { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-3); } }
@media (max-width: 899px) { .art-related { gap: var(--spacing-6); padding-top: var(--spacing-12); } }
/* ---------- Article · sec-cta-banner ---------- */
.art-cta { padding-inline: var(--page-pad); padding-bottom: var(--spacing-20); }
.art-cta__box { position: relative; overflow: clip; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--spacing-7); height: 480px; padding: var(--spacing-16); background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.art-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.art-cta__veil { position: absolute; inset: 0; background-image: linear-gradient(in oklab 90deg, color-mix(in oklab, var(--color-primary) 4%, transparent) 0%, color-mix(in oklab, var(--color-primary) 18%, transparent) 40%, color-mix(in oklab, var(--color-primary) 88%, transparent) 68%, color-mix(in oklab, var(--color-primary) 94%, transparent) 100%); }
[dir="rtl"] .art-cta__veil { transform: scaleX(-1); }
.art-cta__content { position: relative; width: 490px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-7); }
.art-cta__caption { position: absolute; bottom: 28px; inset-inline-start: var(--spacing-8); }
@media (max-width: 1149px) {
.art-cta__veil { background-image: linear-gradient(in oklab 90deg, color-mix(in oklab, var(--color-primary) 10%, transparent) 0%, color-mix(in oklab, var(--color-primary) 60%, transparent) 40%, color-mix(in oklab, var(--color-primary) 94%, transparent) 100%); }
}
@media (max-width: 899px) {
.art-cta { padding-bottom: var(--spacing-section); }
.art-cta__box { align-items: flex-start; justify-content: flex-end; gap: var(--spacing-6); padding: var(--spacing-7); }
.art-cta__img { object-position: 30% 24%; }
.art-cta__veil, [dir="rtl"] .art-cta__veil { transform: none; background-image: linear-gradient(in oklab 180deg, color-mix(in oklab, var(--color-primary) 5%, transparent) 0%, color-mix(in oklab, var(--color-primary) 12%, transparent) 30%, color-mix(in oklab, var(--color-primary) 90%, transparent) 56%, color-mix(in oklab, var(--color-primary) 98%, transparent) 100%); }
.art-cta__content { width: 100%; gap: var(--spacing-6); }
.art-cta__content .btn { width: 100%; justify-content: space-between; }
.art-cta__caption { top: var(--spacing-5); bottom: auto; inset-inline-start: var(--spacing-5); }
}
/* ---------- Article · « More insights » · sec-card-grid · cmp-article-card ---------- */
.art-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--spacing-12); padding-top: var(--spacing-8); }
.art-more__all { gap: var(--spacing-5); }
.art-more__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-7); padding-top: var(--spacing-12); }
.art-more__card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing-10); min-height: 208px; padding-top: var(--spacing-6); border-top: 1px solid var(--color-text); color: var(--color-text); }
.art-more__text { display: flex; flex-direction: column; gap: var(--spacing-3); }
.art-more__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); }
.art-more__card:hover .art-more__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 899px) {
.art-more { display: flex; flex-direction: column; gap: var(--spacing-4); padding-top: 0; }
.art-more__cards { order: 1; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); padding-top: var(--spacing-2); }
.art-more__all { order: 2; }
.art-more__card { min-height: 0; gap: var(--spacing-2); padding-top: var(--spacing-5); border-top-color: var(--color-border-strong); }
.art-more__foot .icon { display: none; }
}
/* 47-contact.css */
/* Contact — Paper "06 — Contact" (10FN-0 desktop, 13UA-0 mobile). Registry: sec-page-intro, cmp-tab--plain,
sec-contact-form, cmp-field, cmp-select, cmp-alert, cmp-contact-aside, cmp-channel-row, cmp-office. */
/* Desktop / mobile variants of a text (…Mobile keys) */
.ct-mob { display: none; }
@media (max-width: 679px) {
.ct-desk { display: none; }
.ct-mob { display: inline; }
}
/* sec-header on Contact: the "Contact" button is the current item (accent outline and label) */
.page-contact .site-nav .btn--outline-inverse[aria-current="page"] { border-color: var(--color-accent); color: var(--color-accent); }
/* ---------- sec-page-intro ---------- */
.ct-intro { padding: var(--spacing-16) var(--page-pad) var(--spacing-8); }
.ct-intro__inner { display: flex; align-items: flex-end; gap: var(--spacing-24); }
.ct-intro__title { flex: 0 1 620px; min-width: 0; animation: ct-in var(--dur-slow) var(--ease) both; }
.ct-intro__lead { flex: 0 1 524px; min-width: 0; padding-bottom: var(--spacing-1); animation: ct-in var(--dur-slow) var(--ease) 80ms both; }
@keyframes ct-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) {
.ct-intro { padding-top: var(--spacing-10); padding-bottom: var(--spacing-7); }
.ct-intro__inner { flex-direction: column; align-items: stretch; gap: var(--spacing-5); }
.ct-intro__title, .ct-intro__lead { flex: none; }
.ct-intro__lead { padding-bottom: 0; }
}
/* ---------- cmp-tab--plain ---------- */
.ct-tabs-wrap { padding: var(--spacing-8) var(--page-pad) 0; }
.ct-tabs { display: flex; border-bottom: 1px solid var(--color-border); }
.ct-tab {
display: flex; align-items: center; gap: var(--spacing-4); flex: 1 1 0; min-width: 0;
padding: var(--spacing-6); border-bottom: 2px solid transparent; margin-bottom: -1px;
color: var(--color-text); text-align: start;
font-size: var(--text-subtitle); line-height: var(--leading-subtitle); letter-spacing: var(--tracking-snug);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ct-tab:hover { border-bottom-color: var(--color-border-strong); }
.ct-tab[aria-selected="true"] { border-bottom-color: var(--color-primary); }
.ct-tab__label { min-width: 0; }
@media (max-width: 1149px) {
.ct-tab { padding-inline: var(--spacing-4); gap: var(--spacing-3); }
}
@media (max-width: 679px) {
.ct-tabs-wrap { padding-top: var(--spacing-3); }
.ct-tab {
flex-direction: column; align-items: flex-start; gap: var(--spacing-2);
padding: var(--spacing-3) var(--spacing-2);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: var(--tracking-normal);
}
}
/* ---------- Tab panels ---------- */
.ct-panel { padding: var(--spacing-16) var(--page-pad) var(--spacing-section); }
.ct-panel[role="tabpanel"]:not([hidden]) { animation: ct-fade var(--dur) var(--ease); }
@keyframes ct-fade { from { opacity: 0; } to { opacity: 1; } }
.ct-panel--office { padding-top: var(--spacing-12); }
.ct-panel--call { padding-top: var(--spacing-4); }
@media (max-width: 679px) {
.ct-panel { padding-top: var(--spacing-10); }
.ct-panel--office { padding-top: var(--spacing-8); }
.ct-panel--call { padding-top: var(--spacing-2); }
}
/* ---------- sec-contact-form ---------- */
.ct-form-layout { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-12); }
.ct-form-col { flex: 0 1 720px; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-6); }
.ct-form-head { display: flex; flex-direction: column; gap: var(--spacing-3); padding-bottom: var(--spacing-4); }
.ct-form { display: flex; flex-direction: column; gap: var(--spacing-6); }
.ct-fieldset { display: flex; flex-direction: column; gap: var(--spacing-6); margin: 0; padding: 0; border: 0; min-width: 0; }
@media (max-width: 899px) {
.ct-form-layout { flex-direction: column; align-items: stretch; gap: var(--spacing-12); }
.ct-form-col { flex: none; }
}
/* cmp-field */
.ct-field { display: flex; flex-direction: column; gap: var(--spacing-2); transition: padding var(--dur-fast) var(--ease); }
.ct-field__label { color: var(--color-text); width: fit-content; }
.ct-input {
display: block; width: 100%; height: 52px; margin: 0; padding: 0 var(--spacing-4);
background: var(--color-surface); color: var(--color-text);
border: 1px solid var(--color-border-strong); border-radius: var(--radius-none);
font: inherit; font-size: var(--text-body); line-height: var(--leading-body);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ct-input--textarea { height: 176px; padding-block: var(--spacing-3); resize: vertical; min-height: 120px; }
.ct-input:hover { border-color: var(--color-text); }
.ct-input:focus, .ct-input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[dir="rtl"] .ct-input[dir="ltr"] { text-align: right; }
/* cmp-field--error: 4px start rule, 2px error border, message with warning-circle */
.ct-field__error { display: flex; align-items: flex-start; gap: var(--spacing-2); color: var(--color-error); }
.ct-field__error .icon { margin-top: 3px; }
.ct-field.is-invalid { border-inline-start: 4px solid var(--color-error); padding-inline-start: var(--spacing-4); }
.ct-field.is-invalid .ct-input { border: 2px solid var(--color-error); padding-inline: calc(var(--spacing-4) - 1px); }
.ct-field.is-invalid .ct-input--textarea { padding-block: calc(var(--spacing-3) - 1px); }
/* cmp-select (select-only combobox) */
.ct-select { position: relative; }
.ct-select__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); cursor: pointer; user-select: none; }
.ct-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-select__value.is-placeholder { color: var(--color-text-muted); }
.ct-select__caret { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.ct-select__caret .icon { position: absolute; inset: 0; }
.ct-select__btn .ct-caret-up, .ct-select__btn[aria-expanded="true"] .ct-caret-down { display: none; }
.ct-select__btn[aria-expanded="true"] .ct-caret-up { display: block; }
.ct-select__btn[aria-expanded="true"] { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ct-select__list {
position: absolute; z-index: 5; top: calc(100% + var(--spacing-2)); inset-inline: 0;
max-height: min(560px, 60vh); overflow-y: auto; overscroll-behavior: contain;
padding-block: var(--spacing-2); background: var(--color-surface); border: 1px solid var(--color-border-strong);
animation: ct-menu var(--dur-fast) var(--ease);
}
@keyframes ct-menu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ct-select__option {
display: flex; align-items: center; min-height: 40px; padding: var(--spacing-2) var(--spacing-4);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text); cursor: pointer;
}
.ct-select__option--other { border-top: 1px solid var(--color-border); }
.ct-select__option:hover, .ct-select__option.is-active { background: var(--color-surface-subtle); }
.ct-select__option[aria-selected="true"] { font-weight: var(--font-weight-medium); }
.ct-field.is-invalid .ct-select__btn { padding-inline: calc(var(--spacing-4) - 1px); }
/* Submit + consent */
.ct-submit { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4); padding-top: var(--spacing-4); }
.ct-submit__btn { padding-inline: var(--spacing-8); gap: var(--spacing-3); }
.ct-submit__btn .ct-spinner { display: none; }
.ct-consent { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-1); }
.ct-consent__link { color: var(--color-text); font-weight: var(--font-weight-medium); text-decoration: underline 1px; text-underline-offset: 3px; }
.ct-consent__link:hover { text-decoration-thickness: 2px; }
/* Sending: fields and button disabled (cmp-button disabled: surface-muted, "Sending…", circle-notch) */
.ct-form.is-sending .ct-field__label { color: var(--color-text-muted); }
.ct-form.is-sending .ct-input { background: var(--color-background); border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.ct-form.is-sending .ct-submit__btn,
.ct-form.is-sending .ct-submit__btn:hover { background: var(--color-surface-muted); color: var(--color-text-muted); opacity: 1; cursor: progress; }
.ct-form.is-sending .ct-submit__btn .ct-spinner { display: block; animation: ct-spin 900ms linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
/* cmp-alert: summary, error (2px error outline, warning-circle), success */
.ct-alert { display: flex; gap: var(--spacing-4); padding: var(--spacing-6); background: var(--color-surface); border: 2px solid var(--color-error); animation: ct-in var(--dur) var(--ease); }
.ct-alert:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.ct-alert__icon { color: var(--color-error); }
.ct-alert__body { display: flex; flex-direction: column; gap: var(--spacing-3); flex: 1 1 0; min-width: 0; }
.ct-alert__links { display: flex; flex-direction: column; gap: var(--spacing-2); }
.ct-alert__links a {
color: var(--color-error); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
text-decoration: underline 1px; text-underline-offset: 3px;
}
.ct-alert__links a:hover { text-decoration-thickness: 2px; }
.ct-alert--success { flex-direction: column; align-items: flex-start; gap: var(--spacing-6); padding: var(--spacing-8); border: 0; }
.ct-success__text { display: flex; flex-direction: column; gap: var(--spacing-4); }
.ct-btn-quiet { min-height: 44px; padding: var(--spacing-2) var(--spacing-5); border-color: var(--color-border-strong); color: var(--color-text); }
.ct-btn-quiet:hover { background: var(--color-surface-subtle); }
/* cmp-contact-aside */
.ct-aside { flex: 0 0 400px; display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-10); background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.ct-aside__list { display: flex; flex-direction: column; gap: var(--spacing-6); }
.ct-aside__item { display: flex; flex-direction: column; gap: var(--spacing-1); }
.ct-aside__value { color: var(--color-text-inverse); width: fit-content; }
.ct-aside__value:hover { text-decoration: underline 1px; text-underline-offset: 4px; }
.ct-aside__download { padding-top: var(--spacing-8); border-top: 1px solid var(--color-border-inverse); }
@media (max-width: 1149px) { .ct-aside { flex-basis: 340px; padding: var(--spacing-8); } }
@media (max-width: 899px) {
.ct-aside { flex: none; padding: var(--spacing-6); gap: var(--spacing-6); }
.ct-aside__download { padding-top: var(--spacing-6); }
.ct-aside__download .btn { width: 100%; }
}
@media (max-width: 679px) {
.ct-submit__btn { width: 100%; }
}
/* ---------- cmp-office (panel "Visit an office") ---------- */
.ct-offices { display: flex; gap: var(--spacing-5); }
.ct-office { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ct-office__photo { position: relative; height: 360px; overflow: hidden; background: var(--color-surface-subtle); flex-shrink: 0; }
/* backgroundSize 108%, backgroundPosition 0% 40% (Paper), saturate 75% */
.ct-office__photo img { position: absolute; left: 0; top: 40%; width: 108%; max-width: none; min-height: 100%; object-fit: cover; transform: translateY(-40%); filter: saturate(75%); }
.ct-office__body { flex-grow: 1; display: flex; flex-direction: column; align-items: flex-start; padding: var(--spacing-10); background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.ct-office__name { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--spacing-3); font-weight: var(--font-weight-regular); }
.ct-office__address { padding-top: var(--spacing-5); max-width: 320px; }
.ct-office__phones { padding-top: var(--spacing-5); }
.ct-office__link { padding-top: var(--spacing-2); }
@media (max-width: 899px) {
.ct-offices { flex-direction: column; }
}
@media (max-width: 679px) {
.ct-office__photo { height: 240px; }
.ct-office__photo img { width: 112%; }
.ct-office__body { padding: var(--spacing-6); }
.ct-office__address { max-width: none; }
}
/* ---------- cmp-channel-row (panel "Call or WhatsApp") ---------- */
.ct-row { display: flex; align-items: center; gap: var(--spacing-8); min-height: 92px; padding-block: var(--spacing-6); border-bottom: 1px solid var(--color-border); }
.ct-row__label { flex: 0 0 240px; }
.ct-row__value { flex: 1 1 0; min-width: 0; color: var(--color-text); }
.ct-row__actions { flex: 0 0 320px; display: flex; justify-content: flex-end; gap: var(--spacing-8); }
@media (max-width: 1149px) {
.ct-row__label { flex-basis: 180px; }
.ct-row__actions { flex-basis: auto; }
}
@media (max-width: 899px) {
.ct-row { flex-direction: column; align-items: flex-start; gap: var(--spacing-1); min-height: 0; padding: var(--spacing-5) 0 var(--spacing-2); }
.ct-row__label, .ct-row__value, .ct-row__actions { flex: none; }
.ct-row__value { width: 100%; }
.ct-row__actions { justify-content: flex-start; }
.ct-row__actions:empty { display: none; }
.ct-row:last-child { padding-bottom: var(--spacing-5); }
}
/* Tripoli landlines on two lines (mobile): one number per line, separator hidden */
.ct-row__lines > span { display: flex; flex-direction: column; align-items: flex-start; font-size: 0; line-height: 0; }
.ct-row__lines .ltr { font-size: var(--text-title); line-height: var(--leading-title); }
/* 48-legal.css */
/* Legal pages — Paper "07 — Legal · Privacy Policy" (11SP-0 desktop, 13VU-0 mobile).
Registry: sec-legal-text (3 columns 220 / 720 / 220), cmp-side-nav, cmp-toc, cmp-contact-box.
Mobile: pages as a scrolling row of chips, "On this page" as a disclosure, full-width text. */
.lg-page { padding: var(--spacing-16) var(--page-pad) var(--spacing-section); }
.lg-cols { display: flex; align-items: flex-start; gap: var(--spacing-10); }
/* Column labels ("Legal", "On this page") */
.lg-col-label { padding-inline-start: var(--spacing-4); }
/* ---------- cmp-side-nav ---------- */
.lg-side, .lg-toc { display: flex; flex-direction: column; gap: var(--spacing-3); padding-top: var(--spacing-3); }
.lg-side { flex: 0 0 220px; position: sticky; top: var(--spacing-8); }
.lg-side__link, .lg-toc__link {
display: flex; align-items: center; min-height: 44px; padding-inline-start: var(--spacing-4);
border-inline-start: 2px solid transparent; color: var(--color-text-muted);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lg-side__link:hover, .lg-toc__link:hover { color: var(--color-text); border-inline-start-color: var(--color-border-strong); }
.lg-side__link[aria-current="page"], .lg-toc__link[aria-current="location"] {
color: var(--color-text); font-weight: var(--font-weight-medium); border-inline-start-color: var(--color-primary);
}
/* ---------- cmp-toc ---------- */
.lg-toc-col { flex: 0 0 220px; position: sticky; top: var(--spacing-8); }
.lg-toc__link { min-height: 36px; padding-block: var(--spacing-2); }
/* ---------- Reading column ---------- */
.lg-reading { flex: 0 1 720px; min-width: 0; }
.lg-head { display: flex; flex-direction: column; gap: var(--spacing-4); padding-bottom: var(--spacing-12); border-bottom: 1px solid var(--color-border); }
.lg-title { animation: lg-in var(--dur-slow) var(--ease) both; }
@keyframes lg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lg-section { display: flex; flex-direction: column; gap: var(--spacing-4); padding-block: var(--spacing-12); border-bottom: 1px solid var(--color-border); scroll-margin-top: var(--spacing-6); }
.lg-section--last { border-bottom: 0; padding-bottom: 0; }
.lg-section--box { gap: var(--spacing-6); }
.lg-section p { color: var(--color-text); }
.lg-num { font-variant-numeric: tabular-nums; }
.lg-link { color: var(--color-text); font-weight: var(--font-weight-medium); text-decoration: underline 1px; text-underline-offset: 4px; }
.lg-link:hover { text-decoration-thickness: 2px; }
.lg-placeholder { padding: var(--spacing-5); background: var(--color-surface-subtle); color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); }
.lg-section .lg-placeholder { color: var(--color-text-muted); }
/* ---------- cmp-contact-box ---------- */
.lg-box { display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-10); background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.lg-section .lg-box p { color: var(--color-text-inverse); }
.lg-section .lg-box p.c-inverse-muted { color: var(--color-text-inverse-muted); }
.lg-box__cols { display: flex; gap: var(--spacing-10); }
.lg-box__col { display: flex; flex-direction: column; gap: var(--spacing-2); flex: 1 1 0; min-width: 0; }
.lg-box__col--email { flex: 0 0 220px; }
.lg-box__email { width: fit-content; text-decoration: underline 1px; text-underline-offset: 4px; }
.lg-box__email:hover { text-decoration-thickness: 2px; }
/* ---------- Mobile pieces (hidden on desktop) ---------- */
.lg-chips { display: none; }
.lg-toc-m { display: none; }
/* 900–1149: two columns (pages + text); "On this page" becomes the disclosure */
@media (max-width: 1149px) {
.lg-toc-col { display: none; }
.lg-toc-m { display: block; padding-top: var(--spacing-3); }
.lg-side { flex-basis: 200px; }
}
/* < 900: chips row + full-width text */
@media (max-width: 899px) {
.lg-page { padding: var(--spacing-8) 0 var(--spacing-section); }
.lg-side { display: none; }
.lg-cols { display: block; padding-inline: var(--page-pad); }
.lg-chips { display: flex; flex-direction: column; gap: var(--spacing-3); padding-bottom: var(--spacing-8); }
.lg-chips__label { padding-inline: var(--page-pad); }
.lg-chips__list {
display: flex; gap: var(--spacing-2); overflow-x: auto; overscroll-behavior-x: contain;
padding-inline: var(--page-pad); scrollbar-width: none; scroll-padding-inline: var(--page-pad);
}
.lg-chips__list::-webkit-scrollbar { display: none; }
.lg-chip {
display: flex; align-items: center; min-height: 44px; padding-inline: var(--spacing-5); white-space: nowrap;
border: 1px solid var(--color-border-strong); color: var(--color-text);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
transition: background-color var(--dur-fast) var(--ease);
}
.lg-chip:hover { background: var(--color-surface); }
.lg-chip[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.lg-head { gap: var(--spacing-3); padding-bottom: var(--spacing-8); }
.lg-section { padding-block: var(--spacing-10); }
.lg-section--last { padding-bottom: 0; }
.lg-section--box { gap: var(--spacing-5); }
.lg-box { padding: var(--spacing-6); gap: var(--spacing-6); }
.lg-box__cols { flex-direction: column; gap: var(--spacing-6); }
.lg-box__col--email { flex: none; }
.lg-box__email { font-size: var(--text-subtitle); line-height: var(--leading-subtitle); }
}
/* "On this page" disclosure (mobile cmp-toc) */
.lg-toc-m__btn {
display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4);
width: 100%; min-height: 48px; padding-inline: var(--spacing-4);
background: var(--color-surface); border: 1px solid var(--color-border-strong); color: var(--color-text);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium); text-align: start;
transition: background-color var(--dur-fast) var(--ease);
}
.lg-toc-m__btn:hover { background: var(--color-surface-subtle); }
.lg-toc-m__icon { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.lg-toc-m__icon .icon { position: absolute; inset: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lg-toc-m__btn[aria-expanded="true"] .icon-plus { opacity: 0; transform: rotate(90deg); }
.lg-toc-m__btn[aria-expanded="false"] .icon-minus { opacity: 0; transform: rotate(-90deg); }
.lg-toc-m__list { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-top: 0; padding-block: var(--spacing-2); }
.lg-toc-m__link {
display: flex; align-items: center; min-height: 44px; padding: var(--spacing-2) var(--spacing-4);
color: var(--color-text); font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
}
.lg-toc-m__link:hover { background: var(--color-surface-subtle); }
/* 90-review.css */
/* Text review tool (static/assets/review.js). Not part of the site design: a prototype utility. */
.rv-bar {
position: fixed; z-index: 1000; bottom: 68px; inset-inline-end: 16px;
display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-2);
max-width: min(360px, calc(100vw - 32px)); font-family: var(--font-sans);
}
.rv-toggle, .rv-listbtn {
display: inline-flex; align-items: center; gap: var(--spacing-2); min-height: 44px; padding: var(--spacing-2) var(--spacing-4);
background: var(--color-surface-inverse); color: var(--color-text-inverse);
border: 1px solid var(--color-border-inverse-strong);
font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--font-weight-medium);
transition: background-color var(--dur-fast) var(--ease);
}
.rv-toggle:hover, .rv-listbtn:hover { background: var(--color-surface-inverse-hover); }
.rv-toggle svg, .rv-listbtn svg, .rv-icon-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
.rv-toggle[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; }
.rv-toggle:focus-visible, .rv-listbtn:focus-visible, .rv-btn:focus-visible, .rv-icon-btn:focus-visible { outline: 2px solid var(--color-focus-inverse); outline-offset: 2px; }
.rv-count { min-width: 22px; height: 22px; padding-inline: 6px; display: inline-grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-caption); border-radius: var(--radius-full); }
.rv-toggle[aria-pressed="true"] .rv-count { background: var(--color-surface-inverse); color: var(--color-text-inverse); }
.rv-hint { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); padding: var(--spacing-2) var(--spacing-3); font-size: var(--text-caption); line-height: var(--leading-caption); }
/* Edit mode: every editable text is outlined on hover */
.rv-on [data-k] { cursor: text; border-radius: 0; transition: outline-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); outline: 1px dashed transparent; outline-offset: 2px; }
.rv-on [data-k]:hover, .rv-on [data-k]:focus-visible { outline: 1px dashed var(--color-focus-inverse); background-color: color-mix(in oklab, var(--color-accent) 18%, transparent); }
.rv-on .rv-edited { background-color: color-mix(in oklab, var(--color-accent) 28%, transparent); text-decoration: underline 2px var(--color-focus-inverse); text-underline-offset: 3px; }
.rv-on .rv-current { outline: 2px solid var(--color-focus-inverse) !important; }
.rv-on .reveal { opacity: 1 !important; transform: none !important; }
.rv-panel, .rv-drawer {
position: fixed; z-index: 1001; bottom: 124px; inset-inline-end: 16px;
width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 148px); overflow-y: auto;
padding: var(--spacing-5); display: flex; flex-direction: column; gap: var(--spacing-2);
background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong);
font-family: var(--font-sans); font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
animation: rv-in var(--dur) var(--ease);
}
@keyframes rv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rv-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-2); }
.rv-panel__head h2 { font-size: var(--text-subtitle); line-height: var(--leading-subtitle); font-weight: var(--font-weight-regular); }
.rv-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--color-text); }
.rv-icon-btn:hover { background: var(--color-surface-subtle); }
.rv-panel__ref { padding: var(--spacing-3); background: var(--color-surface-subtle); display: flex; flex-direction: column; gap: var(--spacing-1); margin-bottom: var(--spacing-2); }
.rv-lbl { font-size: var(--text-label); line-height: var(--leading-label); color: var(--color-text-muted); }
.rv-ref { color: var(--color-text); white-space: pre-line; }
.rv-panel textarea, .rv-drawer input[type="text"] {
width: 100%; padding: var(--spacing-3); font: inherit; font-size: var(--text-body); line-height: var(--leading-body);
color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 0; resize: vertical;
}
.rv-panel textarea:focus-visible, .rv-drawer input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.rv-orig { color: var(--color-text-muted); white-space: pre-line; }
.rv-msg { min-height: 22px; color: var(--color-text-muted); }
.rv-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.rv-actions--stack { flex-direction: column; }
.rv-btn {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--spacing-2) var(--spacing-4);
border: 1px solid var(--color-border-strong); color: var(--color-text); font-weight: var(--font-weight-medium); cursor: pointer;
transition: background-color var(--dur-fast) var(--ease);
}
.rv-btn:hover { background: var(--color-surface-subtle); }
.rv-btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; }
.rv-btn--primary:hover { background: var(--color-surface-inverse-hover); }
.rv-btn--quiet { border-color: transparent; padding-inline: var(--spacing-2); text-decoration: underline; text-underline-offset: 3px; }
.rv-btn--danger { color: var(--color-error); border-color: var(--color-error); }
.rv-file { position: relative; }
.rv-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rv-shortcut, .rv-key { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-muted); direction: ltr; text-align: start; }
.rv-list { display: flex; flex-direction: column; gap: var(--spacing-3); margin-block: var(--spacing-3); }
.rv-list li { padding: var(--spacing-3); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-1); align-items: flex-start; }
.rv-was { color: var(--color-text-muted); text-decoration: line-through; white-space: pre-line; }
.rv-now { white-space: pre-line; }
.rv-empty { color: var(--color-text-muted); border: 0 !important; }
@media (max-width: 679px) {
.rv-bar { bottom: 60px; inset-inline-end: 12px; }
.rv-panel, .rv-drawer { inset-inline: 0; bottom: 0; width: 100%; max-height: 80vh; border-inline: 0; border-bottom: 0; }
}
@media print { .rv-bar, .rv-panel, .rv-drawer { display: none !important; } }