:root {
  --font-family-base: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-h1: 88px;
  --fs-h2: 64px;
  --fs-h3: 42px;
  --fs-h4: 28px;
  --fs-body: 19px;
  --fs-small: 12px;
  --typo-h1-line-height: 0.92;
  --typo-h1-letter-spacing: -0.03em;
  --typo-h1-weight: 600;
  --typo-h1-transform: none;
  --typo-h2-line-height: 1;
  --typo-h2-letter-spacing: -0.03em;
  --typo-h2-weight: 600;
  --typo-h2-transform: none;
  --typo-h3-line-height: 1.02;
  --typo-h3-letter-spacing: -0.03em;
  --typo-h3-weight: 500;
  --typo-h3-transform: none;
  --typo-h4-line-height: 1.08;
  --typo-h4-letter-spacing: -0.02em;
  --typo-h4-weight: 600;
  --typo-h4-transform: uppercase;
  --typo-body-line-height: 1.58;
  --typo-body-letter-spacing: 0em;
  --typo-body-weight: 400;
  --typo-body-transform: none;
  --typo-small-line-height: 1.35;
  --typo-small-letter-spacing: 0.14em;
  --typo-small-weight: 600;
  --typo-small-transform: uppercase;
  --surface-bg: #0e0f14;
  --surface-text: #f2f2f2;
  --surface-text-muted: rgba(242, 242, 242, 0.74);
  --surface-border-width: 1px;
  --surface-border-style: solid;
  --surface-border-color: #303543;
  --surface-radius: 18px;
  --surface-variant-light-bg: #f2f2f2;
  --surface-variant-light-text: #0e0f14;
  --surface-variant-light-text-rgb: 14, 15, 20;
  --surface-variant-accent-bg: #fd216e;
  --surface-variant-accent-text: #f2f2f2;
  --surface-variant-accent-text-rgb: 242, 242, 242;
  --surface-variant-dark-bg: #0e0f14;
  --surface-variant-dark-text: #f2f2f2;
  --surface-variant-dark-text-rgb: 242, 242, 242;
  --surface-variant-deep-bg: #191b24;
  --surface-variant-deep-text: #f2f2f2;
  --surface-variant-deep-text-rgb: 242, 242, 242;
  --surface-padding-top: 24px;
  --surface-padding-right: 24px;
  --surface-padding-bottom: 24px;
  --surface-padding-left: 24px;
  --surface-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(242, 242, 242, 0.04);
  --button-bg: #fd216e;
  --button-text: #f2f2f2;
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-border-color: #fd216e;
  --button-radius: 999px;
  --button-padding-top: 12px;
  --button-padding-right: 16px;
  --button-padding-bottom: 12px;
  --button-padding-left: 16px;
  --button-shadow: 0 0 0 1px rgba(253, 33, 110, 0.26), 0 0 22px rgba(253, 33, 110, 0.28), 0 14px 30px rgba(253, 33, 110, 0.22);
  --button-hover-shadow: 0 0 0 1px rgba(253, 33, 110, 0.42), 0 0 28px rgba(253, 33, 110, 0.36), 0 20px 40px rgba(253, 33, 110, 0.28);
  --button-hover-transform: translateY(-2px);
  --tag-bg: #0e0f14;
  --tag-text: #f2f2f2;
  --tag-border-rgb: 253, 33, 110;
  --tag-border-width: 1px;
  --tag-radius: 999px;
  --tag-padding-y: 9px;
  --tag-padding-x: 15px;
  --tag-font-size: 14px;
  --tag-font-weight: 500;
  --tag-text-transform: none;
  --tag-shadow-1: 0.09;
  --tag-shadow-2: 0.045;
  --tag-hover-1: 0.22;
  --tag-hover-2: 0.18;
  --nav-link-color: #f2f2f2;
  --nav-link-muted-opacity: 0.7;
  --nav-link-active-opacity: 1;
  --nav-link-gap: 32px;
  --nav-shell-margin-top: 12px;
  --nav-mobile-bg: #000000;
  --nav-mobile-text: #f2f2f2;
  --nav-mobile-gap: 4px;
  --nav-mobile-padding-x: 16px;
  --menu-toggle-color: #f2f2f2;
  --skip-link-bg: #f2f2f2;
  --skip-link-text: #000000;
  --skip-link-radius: 999px;
  --skip-link-offset-x: 12px;
  --skip-link-hidden-top: -56px;
  --skip-link-visible-top: 12px;
  --skip-link-padding-y: 10px;
  --skip-link-padding-x: 14px;
  --inline-link-color: #fd216e;
  --inline-link-hover-color: #f2f2f2;
  --projects-tab-color: #9ea3af;
  --projects-tab-active-color: #f2f2f2;
  --projects-tab-gap: 20px;
  --hero-marquee-color: #f2f2f2;
  --hero-marquee-size: 220px;
  --hero-marquee-weight: 500;
  --hero-meta-left-color: #f2f2f2;
  --hero-meta-left-size: 12px;
  --hero-meta-right-color: #f2f2f2;
  --hero-meta-right-size: 44px;
  --hero-meta-right-weight: 300;
  --hero-meta-right-letter-spacing: -0.04em;
  --display-color: #f2f2f2;
  --display-accent-color: #fd216e;
  --display-max-width: 980px;
  --display-line-size: 84px;
  --display-line-weight: 600;
  --display-line-height: 0.95;
  --display-letter-spacing: -0.02em;
  --display-margin-bottom: 112px;
  --display-compact-margin-bottom: 84px;
  --panel-padding-top: 48px;
  --panel-padding-bottom: 140px;
  --panel-content-top: 120px;
  --panel-max-width: 1400px;
  --section-subtitle-max-width: 560px;
  --toggle-color: #fd216e;
  --toggle-muted-opacity: 0.3;
  --toggle-active-opacity: 1;
  --toggle-line-thickness: 2px;
  --toggle-icon-size: 25px;
  --toggle-dot-size: 2px;
  --facts-label-color: #f2f2f2;
  --facts-value-color: #b7bec9;
  --facts-border-color: #20242d;
  --facts-column-width: 140px;
  --facts-row-padding: 24px;
  --contact-title-color: #f2f2f2;
  --contact-title-size: 300px;
  --contact-title-weight: 600;
  --contact-title-letter-spacing: -0.04em;
  --contact-bottom-padding: 110px;
  --contact-links-gap: 16px;
  --hero-media-overlay-color: #050505;
  --hero-media-overlay-opacity: 0.62;
  --portrait-radius: 20px;
  --portrait-border-color: #2a2f3a;
  --portrait-border-width: 1px;
  --placeholder-bg: #0b0f1f;
  --placeholder-text: #f2f2f2;
  --placeholder-border-color: #00b6b6;
  --placeholder-radius: 18px;
  --loader-bg: #000000;
  --loader-label-color: #b6bac2;
  --loader-value-color: #fd216e;
  --loader-track-color: #2b313f;
  --loader-bar-start: #7a2350;
  --loader-bar-end: #fd216e;
  --loader-padding: 24px;
  --loader-max-width: 420px;
  --loader-track-height: 2px;
  --loader-fade-duration: 360ms;
  --loader-reveal-delay: 320ms;
  --loader-min-visible-duration: 460ms;
  --progress-track-color: #1b1e25;
  --progress-bar-color: #fd216e;
  --progress-height: 3px;
  --project-card-bg: #0e0f14;
  --project-card-text: #f2f2f2;
  --project-card-muted: #9ca3af;
  --project-card-border-color: #2b313f;
  --project-card-border-width: 1px;
  --project-card-radius: 18px;
  --project-card-padding-y: 42px;
  --project-card-padding-x: 48px;
  --project-card-gap: 28px;
  --project-media-radius: 18px;
  --section-label-color: #fd216e;
  --section-label-line-color: #fd216e;
  --section-label-gap: 10px;
  --section-label-line-width: 24px;
  --section-label-font-size: 12px;
  --section-label-weight: 600;
  --section-label-letter-spacing: 0.14em;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-family-base);
}

h1 {
  line-height: var(--typo-h1-line-height);
  letter-spacing: var(--typo-h1-letter-spacing);
  font-weight: var(--typo-h1-weight);
  text-transform: var(--typo-h1-transform);
}

h2 {
  line-height: var(--typo-h2-line-height);
  letter-spacing: var(--typo-h2-letter-spacing);
  font-weight: var(--typo-h2-weight);
  text-transform: var(--typo-h2-transform);
}

h3 {
  line-height: var(--typo-h3-line-height);
  letter-spacing: var(--typo-h3-letter-spacing);
  font-weight: var(--typo-h3-weight);
  text-transform: var(--typo-h3-transform);
}

h4 {
  line-height: var(--typo-h4-line-height);
  letter-spacing: var(--typo-h4-letter-spacing);
  font-weight: var(--typo-h4-weight);
  text-transform: var(--typo-h4-transform);
}

p,
li {
  font-size: var(--fs-body);
  line-height: var(--typo-body-line-height);
  letter-spacing: var(--typo-body-letter-spacing);
  font-weight: var(--typo-body-weight);
  text-transform: var(--typo-body-transform);
}

small {
  font-size: var(--fs-small);
  line-height: var(--typo-small-line-height);
  letter-spacing: var(--typo-small-letter-spacing);
  font-weight: var(--typo-small-weight);
  text-transform: var(--typo-small-transform);
}

.brand,
.nav-desktop a,
.nav-mobile a,
.panel-label,
.page-loader-label,
.project-year,
.contact-links a,
.projects-tabs button,
.projects-all-link,
.styles-topbar a,
.styles-topbar p,
.particles-config-header a,
.particles-config-header p,
.particles-config-kicker,
.styles-kicker,
.lab-link,
.lab-header p,
.eyebrow,
.legal-header a,
.legal-header p,
.facts-list span {
  font-size: var(--fs-small);
  line-height: var(--typo-small-line-height);
  letter-spacing: var(--typo-small-letter-spacing);
  font-weight: var(--typo-small-weight);
  text-transform: var(--typo-small-transform);
}

.brand,
.nav-desktop a {
  color: var(--nav-link-color);
}

.skip-link {
  left: var(--skip-link-offset-x);
  top: var(--skip-link-hidden-top);
  background: var(--skip-link-bg);
  color: var(--skip-link-text);
  border-radius: var(--skip-link-radius);
  padding: var(--skip-link-padding-y) var(--skip-link-padding-x);
}

.skip-link:focus {
  top: var(--skip-link-visible-top);
}

.nav-desktop {
  gap: var(--nav-link-gap);
}

.nav-shell {
  margin-top: var(--nav-shell-margin-top);
}

.nav-desktop a {
  opacity: var(--nav-link-muted-opacity);
}

.nav-desktop a:hover,
.nav-desktop a.is-active {
  opacity: var(--nav-link-active-opacity);
}

.menu-toggle span {
  background: var(--menu-toggle-color);
}

.nav-mobile {
  background: var(--nav-mobile-bg);
  gap: var(--nav-mobile-gap);
  padding-inline: var(--nav-mobile-padding-x);
}

.nav-mobile a {
  color: var(--nav-mobile-text);
}

.projects-tabs {
  gap: var(--projects-tab-gap);
}

.projects-tabs button {
  color: var(--projects-tab-color);
}

.projects-tabs button.is-active,
.projects-tabs button:hover {
  color: var(--projects-tab-active-color);
}

.hero-marquee-track span {
  color: var(--hero-marquee-color);
  font-size: var(--hero-marquee-size);
  font-weight: var(--hero-marquee-weight);
}

.hero-meta {
  color: var(--hero-meta-left-color);
  font-size: var(--hero-meta-left-size);
}

.hero-meta-right {
  color: var(--hero-meta-right-color);
  font-size: var(--hero-meta-right-size);
  font-weight: var(--hero-meta-right-weight);
  letter-spacing: var(--hero-meta-right-letter-spacing);
}

.hero-media-placeholder {
  isolation: isolate;
}

.hero-media-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-media-overlay-color);
  opacity: var(--hero-media-overlay-opacity);
  pointer-events: none;
}

.panel-label {
  color: var(--section-label-color);
  gap: var(--section-label-gap);
  font-size: var(--section-label-font-size);
  font-weight: var(--section-label-weight);
  letter-spacing: var(--section-label-letter-spacing);
}

.panel-label span {
  width: var(--section-label-line-width);
  background: var(--section-label-line-color);
}

.panel {
  padding-top: var(--panel-padding-top);
  padding-bottom: var(--panel-padding-bottom);
}

.panel-content {
  max-width: var(--panel-max-width);
  padding-top: var(--panel-content-top);
}

.display-lines {
  max-width: var(--display-max-width);
  margin-bottom: var(--display-margin-bottom);
}

.display-lines.compact {
  margin-bottom: var(--display-compact-margin-bottom);
}

.display-lines .line {
  color: var(--display-color);
  font-size: var(--display-line-size);
  font-weight: var(--display-line-weight);
  line-height: var(--display-line-height);
  letter-spacing: var(--display-letter-spacing);
}

.display-lines em {
  color: var(--display-accent-color);
}

.section-subtitle {
  max-width: var(--section-subtitle-max-width);
}

.page-loader {
  background: var(--loader-bg);
  padding: var(--loader-padding);
  transition:
    opacity var(--loader-fade-duration) ease,
    visibility 0s linear var(--loader-fade-duration);
}

.page-loader-label {
  color: var(--loader-label-color);
}

.page-loader-inner {
  width: min(var(--loader-max-width), 100%);
}

.page-loader-value {
  color: var(--loader-value-color);
}

.page-loader-track {
  background: var(--loader-track-color);
  height: var(--loader-track-height);
}

.page-loader-bar {
  background: linear-gradient(90deg, var(--loader-bar-start), var(--loader-bar-end));
}

.scroll-progress {
  height: var(--progress-height);
  background: var(--progress-track-color);
}

.scroll-progress-bar {
  background: var(--progress-bar-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--progress-bar-color) 42%, transparent);
}

.legal-main a {
  color: var(--inline-link-color);
}

.legal-main a:is(:hover, :focus-visible) {
  color: var(--inline-link-hover-color);
}

:root[data-link-underline="none"] .legal-main a {
  text-decoration: none;
}

:root[data-link-underline="hover"] .legal-main a {
  text-decoration: none;
}

:root[data-link-underline="hover"] .legal-main a:is(:hover, :focus-visible) {
  text-decoration: underline;
}

:root[data-link-underline="always"] .legal-main a {
  text-decoration: underline;
}

.legal-main h1,
.lab-intro h1,
.particles-config-intro h1,
.loader-test-main h1 {
  font-size: var(--fs-h1);
  line-height: var(--typo-h1-line-height);
  letter-spacing: var(--typo-h1-letter-spacing);
  font-weight: var(--typo-h1-weight);
  text-transform: var(--typo-h1-transform);
}

.about-intro .line {
  font-size: calc(var(--fs-h1) * 0.92);
  line-height: var(--typo-h1-line-height);
  letter-spacing: var(--typo-h1-letter-spacing);
  font-weight: var(--typo-h1-weight);
  text-transform: var(--typo-h1-transform);
}

.contact-inner h2 {
  font-size: calc(var(--fs-h1) * 3.2);
  line-height: 0.72;
  letter-spacing: var(--typo-h1-letter-spacing);
  font-weight: var(--typo-h1-weight);
  text-transform: var(--typo-h1-transform);
}

.styles-scale h2,
.styles-cards h2,
.legal-section h2,
.particles-preview-card h2,
.particles-controls-card h2 {
  font-size: calc(var(--fs-h2) * 0.52);
  line-height: var(--typo-h2-line-height);
  letter-spacing: var(--typo-h2-letter-spacing);
  font-weight: var(--typo-h2-weight);
  text-transform: var(--typo-h2-transform);
}

.preset-card h2 {
  font-size: calc(var(--fs-h2) * 0.44);
  line-height: var(--typo-h2-line-height);
  letter-spacing: var(--typo-h2-letter-spacing);
  font-weight: var(--typo-h2-weight);
  text-transform: var(--typo-h2-transform);
}

.service-head h3 {
  font-size: calc(var(--fs-h3) * 1.12);
  line-height: var(--typo-h3-line-height);
  letter-spacing: var(--typo-h3-letter-spacing);
  font-weight: var(--typo-h3-weight);
  text-transform: var(--typo-h3-transform);
}

.project-body h3 {
  font-size: calc(var(--fs-h3) * 0.62);
  line-height: var(--typo-h3-line-height);
  letter-spacing: var(--typo-h3-letter-spacing);
  font-weight: var(--typo-h3-weight);
  text-transform: var(--typo-h3-transform);
}

.principle-card h4 {
  font-size: var(--fs-h4);
  line-height: var(--typo-h4-line-height);
  letter-spacing: var(--typo-h4-letter-spacing);
  font-weight: var(--typo-h4-weight);
  text-transform: var(--typo-h4-transform);
}

.service-item p,
.project-body p,
.legal-lead,
.legal-section p,
.legal-section li,
.lab-intro p,
.particles-config-status,
.loader-test-main p {
  font-size: var(--fs-body);
  line-height: var(--typo-body-line-height);
  letter-spacing: var(--typo-body-letter-spacing);
  font-weight: var(--typo-body-weight);
  text-transform: var(--typo-body-transform);
}

:is(
  .project-card,
  .legal-section,
  .particles-preview-card,
  .particles-controls-card,
  .preset-card,
  .scale-card,
  .type-card,
  .config-card,
  .styles-preview-surface,
  .loader-test-block
) {
  background: var(--surface-bg);
  color: var(--surface-text);
  border: var(--surface-border-width) var(--surface-border-style) var(--surface-border-color);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  padding: var(--surface-padding-top) var(--surface-padding-right) var(--surface-padding-bottom) var(--surface-padding-left);
}

:is(
  .project-card,
  .legal-section,
  .particles-preview-card,
  .particles-controls-card,
  .preset-card,
  .scale-card,
  .type-card,
  .config-card,
  .styles-preview-surface
) :is(h1, h2, h3, h4, strong, label, .principle-index) {
  color: var(--surface-text);
}

:is(
  .project-card,
  .legal-section,
  .particles-preview-card,
  .particles-controls-card,
  .preset-card,
  .scale-card,
  .type-card,
  .config-card,
  .styles-preview-surface
) :is(p, li, small, .project-year, .particles-config-status) {
  color: var(--surface-text-muted);
}

.principle-card,
.service-item.is-visible {
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}

:is(
  .theme-button,
  .particles-controls-actions button,
  .preset-card button,
  .loader-test-actions a,
  .loader-test-actions button,
  .projects-all-link,
  .contact-copy-button,
  .contact-links a
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: var(--button-radius);
  padding-top: var(--button-padding-top);
  padding-right: var(--button-padding-right);
  padding-bottom: var(--button-padding-bottom);
  padding-left: var(--button-padding-left);
  box-shadow: var(--button-shadow);
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: var(--typo-small-letter-spacing);
  font-weight: var(--typo-small-weight);
  text-transform: var(--typo-small-transform);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease, filter 180ms ease;
}

:root[data-button-appearance="unstyled"] :is(
  .theme-button,
  .particles-controls-actions button,
  .preset-card button,
  .loader-test-actions a,
  .loader-test-actions button,
  .projects-all-link,
  .contact-copy-button,
  .contact-links a
) {
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  box-shadow: none;
}

:is(
  .theme-button,
  .particles-controls-actions button,
  .preset-card button,
  .loader-test-actions a,
  .loader-test-actions button,
  .projects-all-link,
  .contact-copy-button,
  .contact-links a
):is(:hover, :focus-visible) {
  transform: var(--button-hover-transform);
  box-shadow: var(--button-hover-shadow);
  filter: brightness(1.04);
}

:root[data-button-appearance="unstyled"] :is(
  .theme-button,
  .particles-controls-actions button,
  .preset-card button,
  .loader-test-actions a,
  .loader-test-actions button,
  .projects-all-link,
  .contact-copy-button,
  .contact-links a
):is(:hover, :focus-visible) {
  transform: none;
  box-shadow: none;
  filter: none;
}

.contact-links {
  flex-wrap: wrap;
  gap: var(--contact-links-gap);
}

.about-more-toggle,
.service-more-toggle {
  color: var(--toggle-color);
  opacity: var(--toggle-muted-opacity);
}

.about-more-line,
.service-more-line {
  height: var(--toggle-line-thickness);
  background: var(--toggle-color);
}

.about-more-icon,
.service-more-icon {
  width: var(--toggle-icon-size);
  height: var(--toggle-icon-size);
  flex: 0 0 var(--toggle-icon-size);
  border-color: var(--toggle-color);
}

.about-more-icon span,
.service-more-icon span {
  width: var(--toggle-dot-size);
  height: var(--toggle-dot-size);
  background: var(--toggle-color);
}

#nice-to-meet-you.is-about-expanded .about-more-toggle,
#services .service-item.is-service-expanded .service-more-toggle {
  opacity: var(--toggle-active-opacity);
}

.facts-list {
  border-top-color: var(--facts-border-color);
}

.facts-list div {
  grid-template-columns: var(--facts-column-width) 1fr;
  padding: var(--facts-row-padding) 0;
  border-bottom-color: var(--facts-border-color);
}

.facts-list span {
  color: var(--facts-label-color);
}

.facts-list strong {
  color: var(--facts-value-color);
}

.contact-inner {
  padding-bottom: var(--contact-bottom-padding);
}

.contact-inner h2 {
  color: var(--contact-title-color);
  font-size: var(--contact-title-size);
  font-weight: var(--contact-title-weight);
  letter-spacing: var(--contact-title-letter-spacing);
}

.portrait-placeholder {
  border-radius: var(--portrait-radius);
  border: var(--portrait-border-width) solid var(--portrait-border-color);
}

.media-placeholder {
  color: var(--placeholder-text);
  border-color: var(--placeholder-border-color);
  border-radius: var(--placeholder-radius);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--placeholder-border-color) 18%, transparent), transparent 72%),
    repeating-linear-gradient(
      -45deg,
      color-mix(in srgb, var(--placeholder-text) 6%, transparent) 0,
      color-mix(in srgb, var(--placeholder-text) 6%, transparent) 12px,
      color-mix(in srgb, var(--placeholder-border-color) 8%, transparent) 12px,
      color-mix(in srgb, var(--placeholder-border-color) 8%, transparent) 24px
    ),
    var(--placeholder-bg);
}

.contact-links.top a {
  font-size: max(calc(var(--fs-small) * 1.08), 13px);
}

.project-card,
.legal-section,
.loader-test-block {
  overflow: hidden;
}

.project-card {
  background: var(--project-card-bg);
  color: var(--project-card-text);
  border: var(--project-card-border-width) solid var(--project-card-border-color);
  border-radius: var(--project-card-radius);
  padding: var(--project-card-padding-y) var(--project-card-padding-x);
  gap: var(--project-card-gap);
}

.project-card .media-placeholder {
  border-radius: var(--project-media-radius);
}

.project-preview {
  border-radius: var(--project-media-radius);
}

.project-body h3 {
  color: var(--project-card-text);
}

.project-body p,
.project-body ul,
.project-year {
  color: var(--project-card-muted);
}

.loader-test-actions {
  align-items: center;
}