@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  
  --primary-50: #F4F1FE; --primary-100: #E6E0FC; --primary-300: #B7A6F5;
  --primary-500: #6E56CF; --primary-600: #5B45B8; --primary-700: #4A3799;
  --primary-900: #2B1F5C;
  
  --secondary-100: #DDF7E7; --secondary-500: #16A34A; --secondary-700: #15803D;
  
  --gray-0: #FFFFFF; --gray-50: #FAFAFB; --gray-100: #F2F2F5;
  --gray-200: #E4E4EA; --gray-300: #CDCDD6; --gray-400: #9C9CAA;
  --gray-500: #71717D; --gray-600: #52525C; --gray-800: #27272E;
  --gray-900: #141419;
  
  --success-100: #DCFCE7; --success-500: #16A34A; --success-700: #166534;
  --warning-100: #FEF3C7; --warning-500: #D97706; --warning-700: #92400E;
  --error-100: #FEE2E2; --error-500: #DC2626; --error-700: #991B1B;
  
  --color-bg: #FFFFFF;
  --color-surface: #FAFAFB;
  --color-surface-2: #F2F2F5;
  --color-border: #E4E4EA;
  --color-border-strong: #CDCDD6;
  --color-text: #141419;
  --color-text-secondary: #52525C;
  --color-text-disabled: #9C9CAA;
  --color-placeholder: #71717D;
  --color-primary-500: #6E56CF;
  --color-primary-600: #5B45B8;
  --color-primary-700: #4A3799;
  --color-focus-ring: #6E56CF;
}
.dark {
  --primary-50: #1B1730; --primary-100: #251E45; --primary-300: #7C66E3;
  --primary-500: #8B77F0; --primary-600: #9D8CF4; --primary-700: #B1A3F7;
  --primary-900: #D6CEFB;
  --secondary-100: #0C2818; --secondary-500: #4ADE80; --secondary-700: #86EFAC;
  --gray-0: #0A0A0F; --gray-50: #111117; --gray-100: #191922;
  --gray-200: #23232E; --gray-300: #2E2E3A; --gray-400: #4B4B5A;
  --gray-500: #6E6E7E; --gray-600: #9A9AA8; --gray-800: #D2D2DA;
  --gray-900: #F2F2F5;
  --success-100: #0C2818; --success-500: #4ADE80; --success-700: #86EFAC;
  --warning-100: #2C2005; --warning-500: #FBBF24; --warning-700: #FCD34D;
  --error-100: #2D0F12; --error-500: #F87171; --error-700: #FCA5A5;
  --color-bg: #0A0A0F;
  --color-surface: #111117;
  --color-surface-2: #191922;
  --color-border: #23232E;
  --color-border-strong: #2E2E3A;
  --color-text: #F2F2F5;
  --color-text-secondary: #9A9AA8;
  --color-text-disabled: #4B4B5A;
  --color-placeholder: #6E6E7E;
  --color-primary-500: #8B77F0;
  --color-primary-600: #9D8CF4;
  --color-primary-700: #B1A3F7;
  --color-focus-ring: #8B77F0;
}

:root {
  
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, -apple-system, sans-serif;
  
  --font-regular: 400;  --font-medium: 500;  --font-semibold: 600;  --font-bold: 700; 
  
  --text-display: clamp(40px, 6vw, 72px);
  --text-h1: clamp(32px, 4.5vw, 48px);
  --text-h2: clamp(26px, 3vw, 34px);
  --text-h3: 24px;
  --text-h4: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-metric: clamp(28px, 3.5vw, 44px);
  
  --tracking-display: -0.03em; 
  --tracking-h1: -0.025em; 
  --tracking-h2: -0.02em; 
  --tracking-h3: -0.015em; 
  --tracking-h4: -0.01em; 
}

:root {
  
  --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --space-32: 128px;
  
  --radius-none: 0px; --radius-sm: 4px; --radius-md: 6px;
  --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px;
  
  --z-base: 0;  --z-raised: 10;  --z-sticky: 100;  --z-dropdown: 200; 
  --z-overlay: 300;  --z-modal: 400;  --z-toast: 500;  --z-tooltip: 600; 
  
  --duration-instant: 100ms;  --duration-fast: 160ms; 
  --duration-base: 240ms;  --duration-slow: 400ms; 
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); 
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); 
  
  --border-hairline: 1px solid var(--color-border); 
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.24);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.32);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.45);
  --shadow-glow: 0 0 0 1px var(--color-primary-500), 0 0 24px -6px var(--color-primary-500);
}

html { color-scheme: light dark; scroll-behavior: smooth; }
body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin: 0; }
::selection { background: color-mix(in srgb, var(--color-primary-500) 30%, transparent); }
a { color: var(--color-primary-500); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a:hover { color: var(--color-primary-600); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 25%, transparent); }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after { box-sizing: border-box; }

.container { max-width: 90%; }

html { background: var(--color-bg); }
body { background: transparent; }
#bg-canvas, #shape-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
main, .site-footer { position: relative; }
.sector-hero:nth-of-type(odd) { background: color-mix(in srgb, var(--color-surface) 80%, transparent); }

.site-header { position: sticky; top: 0; z-index: var(--z-sticky); transition: transform var(--duration-base) var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--font-semibold); font-size: 18px; letter-spacing: var(--tracking-h4); color: var(--color-text); }
.wordmark svg { width: 22px; height: 22px; flex-shrink: 0; }
.wordmark:hover { color: var(--color-text); }

.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: var(--space-2); cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-text); transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-bottom: var(--border-hairline); }
.site-nav.open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: var(--space-3) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.site-nav a { display: block; padding: var(--space-2) var(--space-2); color: var(--color-text-secondary); font-size: var(--text-body); border-radius: var(--radius-md); }
.site-nav a:hover { color: var(--color-text); background: var(--color-surface); }
.site-nav a[aria-current="page"] { color: var(--color-text); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; background: none; border: 0; }
  .site-nav ul { flex-direction: row; align-items: center; padding: var(--space-1); gap: var(--space-1); background: color-mix(in srgb, var(--color-surface) 92%, transparent); border: var(--border-hairline); border-radius: var(--radius-lg); backdrop-filter: blur(8px); }
  .site-nav a { padding: var(--space-2) var(--space-3); font-size: var(--text-body-sm); }
  .site-nav a.nav-cta { background: linear-gradient(to right, #ff488b, #e33adb); color: #101421; font-weight: var(--font-medium); border-radius: var(--radius-md); margin-left: var(--space-1); }
  .site-nav a.nav-cta:hover { filter: brightness(1.1); }
}

main > section { border-bottom: var(--border-hairline); padding-block: var(--space-12); }
main > section:last-child { border-bottom: 0; }
@media (min-width: 768px) { main > section { padding-block: var(--space-16); } }
@media (min-width: 1024px) { main > section { padding-block: var(--space-24); } }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
h1 { font-size: var(--text-h1); font-weight: var(--font-bold); letter-spacing: var(--tracking-h1); line-height: 1.1; }
h2 { font-size: var(--text-h2); font-weight: var(--font-semibold); letter-spacing: var(--tracking-h2); line-height: 1.15; }
h3 { font-size: var(--text-h3); font-weight: var(--font-semibold); letter-spacing: var(--tracking-h3); line-height: 1.25; }
h4 { font-size: var(--text-h4); font-weight: var(--font-semibold); letter-spacing: var(--tracking-h4); }
p { margin: 0; max-width: 65ch; }
p + p { margin-top: var(--space-4); }

.hero { padding-block: var(--space-16); }
.home-hero { min-height: calc(100vh - 64px); display: flex; align-items: flex-end; padding-block: 0 var(--space-16); }
.home-hero .container { width: 100%; }
@media (min-width: 1024px) { .hero { padding-block: var(--space-32) var(--space-24); } }
.hero h1 { font-size: 60px; letter-spacing: var(--tracking-display); max-width: 16ch; font-weight: var(--font-semibold); }
.hero .actions { margin-top: var(--space-8); }

.lede { font-size: var(--text-body-lg); color: var(--color-text-secondary); }
.muted { color: var(--color-text-secondary); }

.btn { display: inline-block; font-family: var(--font-sans); font-weight: var(--font-medium); font-size: var(--text-body); color: #101421; background: linear-gradient(to right, #ff488b, #e33adb); border: 0; border-radius: var(--radius-md); padding: var(--space-3) var(--space-6); cursor: pointer; transition: filter var(--duration-fast) var(--ease-out); }
.btn:hover { filter: brightness(1.1); color: #101421; }
.btn:active { filter: brightness(0.95); transform: translateY(0.5px); }

.stats-row { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 700px) { .stats-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 760px; } }
.stat { background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); }
.stat-num { font-family: var(--font-display); font-weight: var(--font-semibold); font-size: var(--text-h2); letter-spacing: var(--tracking-h2); font-variant-numeric: tabular-nums; background: linear-gradient(to right, #ff488b, #e33adb); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.case-study { padding-block: var(--space-10); border-bottom: var(--border-hairline); }
.case-study:first-of-type { padding-top: 0; }
.case-study:last-of-type { border-bottom: 0; padding-bottom: 0; }
.case-meta { color: var(--color-text-secondary); font-size: var(--text-body-sm); font-variant-numeric: tabular-nums; margin: var(--space-3) 0 var(--space-6); max-width: none; }
.case-study blockquote { margin: var(--space-8) 0 0; padding-left: var(--space-5); border-left: 2px solid #ff488b; }
.case-study blockquote p { color: var(--color-text-secondary); font-size: var(--text-body-lg); }
.case-study cite { display: block; margin-top: var(--space-3); font-style: normal; font-size: var(--text-body-sm); color: var(--color-text); }
.grad-word { background: linear-gradient(to right, #ff488b, #e33adb); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; margin-right: -0.06em; }
.text-link { display: inline-block; font-weight: var(--font-medium); background: linear-gradient(to right, #ff488b, #e33adb); -webkit-background-clip: text; background-clip: text; color: transparent; transition: filter var(--duration-fast) var(--ease-out); }
.text-link::after { content: " \2192"; }
.text-link:hover { filter: brightness(1.15); color: transparent; }

.split { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; } }
.split > h2 { max-width: 18ch; }

.card-grid { display: grid; gap: var(--space-4); margin-top: var(--space-10); }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.card { display: block; background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); color: var(--color-text); transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); color: var(--color-text); }
.card p { color: var(--color-text-secondary); font-size: var(--text-body-sm); margin-top: var(--space-2); }
.card .text-link { margin-top: var(--space-4); font-size: var(--text-body-sm); }

.statement { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--font-semibold); letter-spacing: var(--tracking-h2); line-height: 1.3; max-width: 30ch; }
.statement + .actions { margin-top: var(--space-6); }

.service-block { display: grid; gap: var(--space-4); padding-block: var(--space-10); border-bottom: var(--border-hairline); }
.service-block:last-child { border-bottom: 0; padding-bottom: 0; }
.service-block:first-of-type { padding-top: 0; }
@media (min-width: 900px) { .service-block { grid-template-columns: 4fr 8fr; gap: var(--space-16); } }
.service-block h3 { max-width: 14ch; }

.item-grid { display: grid; gap: var(--space-6); margin-top: var(--space-10); }
@media (min-width: 700px) { .item-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-16); } }
.item-grid h4 { margin-bottom: var(--space-2); }
.item-grid p { color: var(--color-text-secondary); font-size: var(--text-body-sm); }

.sector-hero { min-height: 50vh; display: flex; align-items: center; }
.sector-hero h2 { font-size: var(--text-h1); letter-spacing: var(--tracking-h1); }
.sector-hero p { margin-top: var(--space-5); font-size: var(--text-body-lg); color: var(--color-text-secondary); }
.sector-hero:nth-of-type(odd) { background: var(--color-surface); }
.sector-hero .container { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .sector-hero .container { grid-template-columns: 1fr 1fr; gap: var(--space-16); } .sector-hero:nth-of-type(3) .img-frame, .sector-hero:nth-of-type(5) .img-frame { order: -1; } }

.contact-details { display: grid; gap: var(--space-4); margin-top: var(--space-10); }
@media (min-width: 768px) { .contact-details { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); max-width: 900px; } }
.contact-details > div { background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.contact-details h4 { font-size: var(--text-body-sm); color: var(--color-text-secondary); font-family: var(--font-sans); font-weight: var(--font-medium); margin-bottom: var(--space-2); }
.contact-details a { color: var(--color-text); font-variant-numeric: tabular-nums; }
.contact-details a:hover { color: #ff488b; }
.contact-details p { color: var(--color-text); font-size: var(--text-body); }
.contact-form { display: grid; gap: var(--space-5); margin-top: var(--space-8); max-width: 720px; }
@media (min-width: 700px) { .contact-form { grid-template-columns: 1fr 1fr; } .cf-full { grid-column: 1 / -1; } }
.contact-form label { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.contact-form input, .contact-form textarea { font-family: var(--font-sans); font-size: var(--text-body); color: var(--color-text); background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); resize: vertical; }
.contact-form input:hover, .contact-form textarea:hover { border-color: var(--color-border-strong); }
.contact-form button { justify-self: start; }

.site-footer { border-top: var(--border-hairline); padding-block: var(--space-8); }
.site-footer p { color: var(--color-text-secondary); font-size: var(--text-body-sm); }

.actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.stack-sm > * + * { margin-top: var(--space-4); }
.section-head { margin-bottom: var(--space-6); }

#preloader { position: fixed; inset: 0; z-index: 300; background: var(--color-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); transition: opacity 0.45s var(--ease-out); }
#preloader svg { width: 60px; height: 60px; }
.pl-bar { width: 180px; height: 2px; border-radius: 999px; background: color-mix(in srgb, var(--color-border-strong) 60%, transparent); overflow: hidden; }
.pl-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(to right, #ff488b, #e33adb); transition: width 0.12s linear; }
.pl-pct { font-size: var(--text-body-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; margin-top: calc(-1 * var(--space-4)); }
#preloader.done { opacity: 0; pointer-events: none; }
.cookie-card { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: 250; max-width: 380px; background: color-mix(in srgb, var(--color-surface) 94%, transparent); backdrop-filter: blur(12px); border: var(--border-hairline); border-radius: var(--radius-xl, 14px); padding: var(--space-6); box-shadow: var(--shadow-lg); transform: translateY(0); opacity: 1; transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
@media (min-width: 600px) { .cookie-card { left: var(--space-6); right: auto; bottom: var(--space-6); } }
.cookie-card.leaving { transform: translateY(12px); opacity: 0; }
.cookie-card h4 { margin-bottom: var(--space-2); }
.cookie-card > p { color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.cookie-opts { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hairline); }
.cookie-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--text-body-sm); color: var(--color-text); }
.cookie-opt small { display: block; color: var(--color-text-secondary); }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; background: var(--color-border-strong); border-radius: 999px; transition: background 0.16s var(--ease-out); }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.16s var(--ease-out); }
.switch input:checked + i { background: linear-gradient(to right, #ff488b, #e33adb); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + i { opacity: 0.55; }
.cookie-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.cookie-actions .btn { padding: var(--space-2) var(--space-4); font-size: var(--text-body-sm); }
.btn-ghost { font-family: var(--font-sans); font-weight: var(--font-medium); font-size: var(--text-body-sm); color: var(--color-text); background: none; border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out); }
.btn-ghost:hover { border-color: var(--color-border-strong); }

.prose { max-width: 720px; }
.prose h2 { font-size: var(--text-h3); letter-spacing: var(--tracking-h3); margin-top: var(--space-10); }
.prose h3 { font-size: var(--text-h4); letter-spacing: var(--tracking-h4); margin-top: var(--space-6); }
.prose h2 + p, .prose h3 + p { margin-top: var(--space-3); }
.prose ul { margin: var(--space-4) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-secondary); }
.prose p { color: var(--color-text-secondary); }
.prose > p:first-child { color: var(--color-text); font-size: var(--text-body-lg); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer-row a { color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.footer-row a:hover { color: var(--color-text); }

.gicon { width: 28px; height: 28px; display: block; fill: none; stroke: url(#zmark); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--space-4); }
.sb-head .gicon, .section-head .gicon { margin-bottom: var(--space-3); }
.img-frame { margin: 0; position: relative; border: var(--border-hairline); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.8); }
.img-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,72,139,0.16), rgba(227,58,219,0.16)), rgba(10,10,15,0.18); pointer-events: none; }
.split .img-frame, .stack-sm .img-frame { max-width: 620px; }
p + .img-frame, a + .img-frame { margin-top: 20px; }
.hero-sub { margin-top: var(--space-8); }
.hero-note { margin-top: var(--space-5); }
.statement + .stack-sm { margin-top: var(--space-4); }
.section-head .muted { margin-top: var(--space-4); }
.page-title { text-align: center; max-width: none; }
.btn-light { font-weight: 300; }