.before-load body {
  opacity: 0;
}

.submit-button_wraper.is-contact-pending,
.submit-button_wraper.is-contact-success,
.submit-button_wraper.is-contact-error {
  pointer-events: auto;
}

.submit-button_wraper.is-contact-success {
  background-color: #00b27a !important;
}

.submit-button_wraper.is-contact-error {
  background-color: #ff5a3d !important;
}

.submit-button_wraper.is-contact-pending .arrow-button,
.submit-button_wraper.is-contact-success .arrow-button,
.submit-button_wraper.is-contact-error .arrow-button {
  display: none;
}

.cookbook-notebook-inline {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  color: #fff;
  background: #030405;
}

.cookbook-page .cookbook-hero,
.cookbook-page .cookbook-next,
.cookbook-page .footer {
  position: relative;
  z-index: 10;
}

.cookbook-page .cookbook-content {
  position: relative;
  z-index: 1;
}

.cookbook-notebook-inline #root {
  position: relative;
  z-index: 1;
  height: auto !important;
  min-height: 0;
}

.cookbook-notebook-inline #root > .contents > .absolute.inset-0 {
  position: relative !important;
  inset: auto !important;
  overflow: visible !important;
}

.cookbook-notebook-inline #App {
  height: auto !important;
  overflow: visible !important;
}

.cookbook-notebook-inline #portal {
  z-index: 2 !important;
  color: initial;
}

.submit-button.is-contact-message {
  width: 100%;
  min-height: 2.5em;
  padding-right: 1.25em;
  padding-left: 1.25em;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  align-items: center;
  justify-content: center;
  display: flex;
}

.submit-button:disabled {
  cursor: default;
  opacity: 1;
}

.submit-button_wraper.is-contact-success .submit-button,
.submit-button_wraper.is-contact-error .submit-button,
.submit-button_wraper.is-contact-pending .submit-button {
  color: #030405 !important;
  background: transparent !important;
  border-color: transparent !important;
}

.cookie-consent {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  display: grid;
  gap: 0.75rem;
  width: min(30rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px dashed rgba(255, 255, 255, 0.42);
  background: rgba(3, 4, 5, 0.94);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

.cookie-consent.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.cookie-consent p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cookie-consent button {
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  border-radius: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}

.cookie-consent button:hover,
.cookie-consent button:focus-visible {
  background: #fff;
  color: #030405;
  outline: 0;
}

/* Keep the p5 terrain canvas behind hero content so menu/text stay visible. */
.section-hero .runner {
  z-index: 0;
}

.section-hero .hero-top-menu,
.section-hero .main_header__wrapper,
.section-hero .hero-axis {
  position: relative;
  z-index: 1;
}

@media (hover: none), (pointer: coarse) {
  .desktop__menu-item:hover {
    opacity: 1;
  }
}

:root,
[data-theme=dark] {
  --text: #fff;
  --text-dark: #fff;
  --text-light: #fff;
  --bg: #030405;
  --bg-dark: #030405;
  --bg-light: #030405;
  --bg-transparent: rgba(3, 4, 5, 0.86);
  --bg-transparent-dark: rgba(3, 4, 5, 0.86);
  --bg-transparent-light: rgba(3, 4, 5, 0.86);
  --form-text: #fff;
  --form-text-dark: #fff;
  --form-text-light: #fff;
  --form-inputs: rgba(255, 255, 255, 0.08);
  --form-inputs-dark: rgba(255, 255, 255, 0.08);
  --form-inputs-light: rgba(255, 255, 255, 0.08);
  --form-bg: rgba(3, 4, 5, 0.92);
  --form-bg-dark: rgba(3, 4, 5, 0.92);
  --form-bg-light: rgba(3, 4, 5, 0.92);
  --menu-bg-transparent: rgba(3, 4, 5, 0.9);
  --menu-bg-transparent-dark: rgba(3, 4, 5, 0.9);
  --menu-bg-transparent-light: rgba(3, 4, 5, 0.9);
  --videos-bg: #030405;
  --videos-bg-dark: #030405;
  --videos-bg-light: #030405;
  --gradient: var(--particle-gradient);
  --particle-gradient: linear-gradient(135deg, #f7f7f7, #050505);
  --accent: #00b27a;
  --accent-hover: #fff;
  --accent-image: linear-gradient(135deg, #fff, #fff);
  --accent-glow: rgba(255, 255, 255, 0.45);
  --accent-glow-soft: rgba(255, 255, 255, 0.25);
  --accent-text-on-hover: #030405;
  --syntax-keyword: #ff9f60;
  --syntax-variable: #ff9f60;
  --syntax-string: #00a6ff;
  --syntax-placeholder: #00b27a;
  --syntax-bracket: #00b27a;
  --syntax-operator: rgba(255, 255, 255, 0.65);
  --syntax-comment: rgba(255, 255, 255, 0.4);
  color-scheme: dark;
}

[data-particle-color-mode=gradient] {
  --accent-hover: var(--particle-gradient);
  --accent-image: var(--particle-gradient);
  --accent-glow: rgba(255, 159, 28, 0.55);
  --accent-glow-soft: rgba(255, 159, 28, 0.3);
  --accent-text-on-hover: #fff;
  --accent-glow-a: #ff9f1c;
  --accent-glow-b: #ff3f6a;
  --accent-glow-c: #6affd1;
  --syntax-keyword: var(--accent-glow-a);
  --syntax-variable: var(--accent-glow-a);
  --syntax-string: var(--accent-glow-c);
  --syntax-placeholder: var(--accent-glow-b);
  --syntax-bracket: var(--accent-glow-b);
}

[data-particle-palette=fire] {
  --particle-gradient: linear-gradient(135deg, #ff3f19, #ff9f60, #ffe2a0);
  --accent-glow-a: #ff3f19;
  --accent-glow-b: #ff9f60;
  --accent-glow-c: #ffe2a0;
}

[data-particle-palette=viridis] {
  --particle-gradient: linear-gradient(135deg, #440154, #3b528b, #21918c, #5ec962, #fde725);
  --accent-glow-a: #3b528b;
  --accent-glow-b: #21918c;
  --accent-glow-c: #fde725;
}

[data-particle-palette=inferno] {
  --particle-gradient: linear-gradient(135deg, #000004, #420a68, #932667, #dd513a, #fca50a, #fcffa4);
  --accent-glow-a: #932667;
  --accent-glow-b: #dd513a;
  --accent-glow-c: #fca50a;
}

[data-particle-palette=magma] {
  --particle-gradient: linear-gradient(135deg, #000004, #3b0f70, #8c2981, #de4968, #fe9f6d, #fcfdbf);
  --accent-glow-a: #8c2981;
  --accent-glow-b: #de4968;
  --accent-glow-c: #fe9f6d;
}

[data-particle-palette=spectrum] {
  --particle-gradient: linear-gradient(135deg, #ff004c, #ff9f1c, #faff00, #00d084, #00a6ff, #8f00ff);
  --accent-glow-a: #ff004c;
  --accent-glow-b: #00d084;
  --accent-glow-c: #8f00ff;
}

[data-particle-palette=ocean] {
  --particle-gradient: linear-gradient(135deg, #0b3d3a, #16a085, #3fc488, #c8e36b, #f3a64a, #c0392b);
  --accent-glow-a: #16a085;
  --accent-glow-b: #c8e36b;
  --accent-glow-c: #f3a64a;
}

:root {
  --font-size: var(--font-size-desk, .926vw);
}

body {
  font-size: max(var(--font-size), 0.75rem) !important;
  background: #030405 !important;
  color: #fff !important;
}

body,
a,
button,
input,
textarea,
select,
.grid,
.text-menu,
.desktop__menu-item,
.mobile_menu_links,
.text-l,
.text-m,
.text-s,
.h1-main,
.project__index,
.project__title-text,
.project__tags,
.contact-tag {
  color: #fff !important;
}

[data-hover="scrabmle"]:hover,
[data-hover="scrabmle"]:focus-visible {
  opacity: 1 !important;
  color: var(--accent) !important;
}

.project {
  isolation: isolate;
  overflow: hidden;
}

.project::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--project-bg-image);
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: saturate(0.9) brightness(0.58);
  transform: scale(1.04);
  transition: opacity 300ms ease, transform 600ms ease;
}

.project__wrapper:hover .project::before,
.project__wrapper:focus-visible .project::before {
  opacity: 0.56;
  transform: scale(1);
}

.project__hidden-info > .project_image {
  display: none !important;
}

.section-home-gallery,
.section-home-lightbox {
  margin-top: 5em;
}

.projects-block--gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1em;
  margin: 0 1em;
}

.blog-gallery-card {
  display: grid;
  min-height: 100%;
  border: 1px dashed var(--service-border-soft, rgba(255, 255, 255, 0.38));
  color: var(--text) !important;
  text-decoration: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
}

.blog-gallery-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  filter: saturate(0.84) brightness(0.68);
  transition: filter 240ms ease, transform 480ms ease;
}

.blog-gallery-card:hover .blog-gallery-card__image,
.blog-gallery-card:focus-visible .blog-gallery-card__image {
  filter: saturate(1) brightness(0.92);
  transform: scale(1.025);
}

.blog-gallery-card__body {
  display: grid;
  align-content: start;
  gap: 0.85em;
  padding: 1em;
}

.blog-gallery-card__title,
.project-lightbox-card__title,
.project-lightbox__title {
  margin: 0;
  font-weight: 300;
  letter-spacing: 0;
}

.blog-gallery-card__title {
  font-size: clamp(1.65em, 2.5vw, 2.75em);
  line-height: 1.02;
}

.blog-gallery-card__description {
  margin: 0;
  color: var(--service-muted, rgba(255, 255, 255, 0.66)) !important;
  line-height: 1.45;
}

.projects-block--lightbox {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(18em, 31vw);
  gap: 1em;
  margin: 0 1em;
  padding-bottom: 0.75em;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.project-lightbox-card {
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px dashed var(--service-border-soft, rgba(255, 255, 255, 0.38));
  background: rgba(255, 255, 255, 0.025);
  color: var(--text) !important;
  cursor: pointer;
  font: inherit;
  text-align: left;
  overflow: hidden;
  scroll-snap-align: start;
}

.project-lightbox-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.66);
  transition: filter 240ms ease, transform 480ms ease;
}

.project-lightbox-card:hover .project-lightbox-card__image,
.project-lightbox-card:focus-visible .project-lightbox-card__image {
  filter: saturate(1) brightness(0.92);
  transform: scale(1.025);
}

.project-lightbox-card__body {
  display: grid;
  gap: 0.85em;
  padding: 1em;
}

.project-lightbox-card__title {
  font-size: clamp(1.45em, 2.15vw, 2.3em);
  line-height: 1.04;
}

.has-project-lightbox {
  overflow: hidden;
}

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 1em;
  background: rgba(3, 4, 5, 0.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.project-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.project-lightbox__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18em, 0.75fr);
  width: min(92em, 100%);
  max-height: min(48em, calc(100vh - 2em));
  border: 1px dashed rgba(255, 255, 255, 0.52);
  background: #030405;
  overflow: hidden;
}

.project-lightbox__image {
  width: 100%;
  height: 100%;
  min-height: 28em;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.86);
}

.project-lightbox__content {
  display: grid;
  align-content: end;
  gap: 1.1em;
  padding: 1.25em;
}

.project-lightbox__count {
  color: var(--service-muted, rgba(255, 255, 255, 0.66)) !important;
  font-size: 0.9em;
}

.project-lightbox__title {
  font-size: clamp(2.4em, 4vw, 5em);
  line-height: 0.95;
}

.project-lightbox__description {
  margin: 0;
  color: var(--service-muted, rgba(255, 255, 255, 0.66)) !important;
  font-size: 1.05em;
  line-height: 1.5;
}

.project-lightbox__close,
.project-lightbox__nav {
  position: absolute;
  min-height: 2.75em;
  padding: 0.55em 0.8em;
  border: 1px dashed rgba(255, 255, 255, 0.58);
  background: rgba(3, 4, 5, 0.72);
  color: var(--text) !important;
  cursor: pointer;
  font: inherit;
}

.project-lightbox__close:hover,
.project-lightbox__close:focus-visible,
.project-lightbox__nav:hover,
.project-lightbox__nav:focus-visible {
  background: var(--text);
  color: #030405 !important;
  outline: 0;
}

.project-lightbox__close {
  top: 0.75em;
  right: 0.75em;
}

.project-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.project-lightbox__nav--previous {
  left: 0.75em;
}

.project-lightbox__nav--next {
  right: 0.75em;
}

.projects-block--cascade-ready .project__cascade-item {
  opacity: 0;
  transform: translate3d(0, 1.35em, 0);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 680ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--cascade-index, 0) * 74ms);
  will-change: opacity, transform;
}

.projects-block--cascade-in .project__cascade-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.projects-block--cascade-ready .project__line.project__cascade-item {
  transform: scaleX(0);
  transform-origin: left center;
  transition-duration: 480ms;
}

.projects-block--cascade-in .project__line.project__cascade-item {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .projects-block--cascade-ready .project__cascade-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media screen and (max-width: 991px) {
  .project::before {
    display: none;
  }

  .projects-block--gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .projects-block--lightbox {
    grid-auto-columns: minmax(17em, 44vw);
  }

  .project-lightbox__dialog {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .project-lightbox__image {
    min-height: 18em;
    max-height: 52vh;
  }

  .projext-image_mobile {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-position: center;
    border-radius: 0.35em 0.35em 0 0;
  }
}

@media screen and (max-width: 991px) {
  :root {
    --font-size: var(--font-size-tablet, 1.6vw);
  }
}

@media screen and (max-width: 767px) {
  :root {
    --font-size: var(--font-size-mobile-l, 2.8vw);
  }

  .projects-block--gallery {
    grid-template-columns: 1fr;
  }

  .projects-block--lightbox {
    grid-auto-columns: minmax(16em, 78vw);
  }

  .section-home-gallery,
  .section-home-lightbox {
    margin-top: 3.5em;
  }

  .project-lightbox {
    padding: 0.65em;
  }

  .project-lightbox__content {
    padding: 1em;
  }

  .project-lightbox__title {
    font-size: 2.5em;
  }

  .project-lightbox__nav {
    top: auto;
    bottom: 0.75em;
    transform: none;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --font-size: var(--font-size-mobile, 4.1vw);
  }
}

.grid {
  --padding: 1vw;
  --stroke-color: var(--text, #fff);
  --x-pos-1: 0%;
  --x-pos-2: 30%;
  --x-pos-3: 48%;
  --x-pos-4: 60%;
  --x-pos-5: 70%;
  --x-pos-6: 78%;
  --x-pos-7: 85%;
  --x-pos-8: 90%;
  --x-pos-9: 95%;
  --x-pos-10: 100%;
  --dashed-line-bg: repeating-linear-gradient(to top, var(--stroke-color) 0, var(--stroke-color) 2px, transparent 2px, transparent 6px);
  --font-size: 0.8vw;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 var(--padding);
  font-size: var(--font-size);
  color: var(--stroke-color);
  font-family: "Switzer Variable", "Roboto", sans-serif;
  letter-spacing: -0.02em;
  line-height: 125%;
}

@media screen and (max-width: 991px) {
  .grid {
    --font-size: 1.6vw;
  }
}

@media screen and (max-width: 767px) {
  .grid {
    --font-size: 2.45vw;
    --padding: 2.8vw;
  }
}

@media screen and (max-width: 478px) {
  .grid {
    --font-size: 3.6vw;
    --padding: 4.1vw;
  }
}

.grid::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--stroke-color);
  transform: scaleX(0);
  transform-origin: left;
}

.grid__container {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 4.1vw;
}

.grid__section {
  width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.grid__x {
  position: absolute;
  top: 0;
  bottom: 0;
}

.grid__x:nth-child(1) {
  left: var(--x-pos-1);
}

.grid__x:nth-child(2) {
  left: var(--x-pos-2);
}

.grid__x:nth-child(3) {
  left: var(--x-pos-3);
}

.grid__x:nth-child(4) {
  left: var(--x-pos-4);
}

.grid__x:nth-child(5) {
  left: var(--x-pos-5);
}

.grid__x:nth-child(6) {
  left: var(--x-pos-6);
}

.grid__x:nth-child(7) {
  left: var(--x-pos-7);
}

.grid__x:nth-child(8) {
  left: var(--x-pos-8);
}

.grid__x:nth-child(9) {
  left: var(--x-pos-9);
}

.grid__x:nth-child(10) {
  left: var(--x-pos-10);
}

@media screen and (max-width: 991px) {
  .grid__x:nth-child(2) {
    display: none;
  }

  .grid__x:nth-child(4) {
    display: none;
  }

  .grid__x:nth-child(5) {
    display: none;
  }

  .grid__x:nth-child(7) {
    display: none;
  }

  .grid__x:nth-child(8) {
    display: none;
  }

  .grid__x:nth-child(9) {
    display: none;
  }

  .grid__x:nth-child(10) {
    display: none;
  }
}

.grid__x#hero-x::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--stroke-color);
  top: auto;
  bottom: 0;
  transform: translate(-50%, 50%);
}

.grid__x-line {
  width: 1px;
  height: calc(100% - 4px);
  background: var(--dashed-line-bg);
  transform: scaleY(0);
  transform-origin: bottom;
}

.grid__x-label {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translate(-50%, 50%);
  opacity: 0;
}

.grid__x-text {
  width: max-content;
  position: absolute;
  top: calc(100% + 2.5em);
  left: -3px;
  display: flex;
  align-items: stretch;
  padding-left: 3px;
  overflow: hidden;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .grid__x-text {
    display: none;
  }
}

.grid__x-text#hero-text {
  top: calc(100% + 3.5em);
}

.grid__x-text-line {
  position: absolute;
  top: .5em;
  bottom: .25em;
  width: 1px;
  background: var(--dashed-line-bg);
  transform-origin: top;
}

.grid__x-text-line::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--stroke-color);
  transform: translateX(-50%);
}

.grid__x-text-content {
  margin-left: 1em;
}

.section-hero {
  position: relative;
}

.section-hero .grid-wrapper {
  display: none !important;
}

.section-hero .hero-axis {
  position: absolute;
  left: 0;
  right: 0;
  top: 50.5%;
  z-index: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

@media screen and (max-width: 479px) {
  .section-hero .hero-axis {
    top: 55%;
  }
}

.section-hero .grid::before {
  transform: scaleX(1) !important;
}

.section-hero .grid__x-line,
.section-hero .grid__x-text-line {
  transform: scaleY(1) !important;
}

.section-hero .grid__x-label {
  opacity: 1 !important;
  transform: translate(-50%, 50%) !important;
}

.section-hero .grid__x-text {
  opacity: 1 !important;
  transform: none !important;
}

.section-hero .grid__x-text-content {
  transform: none !important;
}

.grid__circles {
  position: absolute;
  top: 100%;
  left: var(--x-pos-6);
  transform: translate(-50%, -50%);
  width: 25%;
  opacity: 0;
}

@media screen and (max-width: 991px) {
  .grid__circles {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .grid__circles {
    width: 85%;
  }
}

.grid__circles svg {
  width: 100%;
  color: var(--stroke-color);
  transform: scale(0.6) rotate(400deg);
}

.grid__circles #grid-circle-big {
  display: none;
}

.grid__circles circle {
  animation-duration: 28s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center;
}

@media screen and (max-width: 478px) {
  .grid__circles #grid-circle-big {
    stroke-dasharray: 1 31;
  }

  .grid__circles #grid-circle-small-wrapper {
    transform-origin: center;
    transform: scale(1.45);
  }
}

.w-checkbox-input {
  background-image: none !important;
}

.form-hidden-input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

video[id="fe92a98d-09f5-4e82-92c7-4db62e5ad26d-video"] {
  background-image: url("media/site-assets/example.jpg");
}

video[id="5818bb5f-cf5b-407d-c43f-2cc60a5af6fb-video"] {
  background-image: url("media/site-assets/example.jpg");
}

video[id="18d6a81a-09a6-a3f7-ba29-66e69a9ca847-video"] {
  background-image: url("media/site-assets/example.jpg");
}

video[id="ba23bfed-3948-fd9d-8b33-48eee4a66937-video"] {
  background-image: url("media/site-assets/example.jpg");
}

/* ---- Underline reveal + glow on "ready to glow." link ---- */
.text-underlined.ready-to-glow {
  position: relative;
  color: #fff !important;
  text-decoration: none;
  transition: text-shadow 240ms ease, filter 240ms ease;
}

.text-underlined.ready-to-glow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 2px;
  background: var(--accent-image);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}

.text-underlined.ready-to-glow.in-view::after {
  transform: scaleX(1);
}

.text-underlined.ready-to-glow:hover {
  text-shadow:
    0 0 14px rgba(255,255,255,0.55),
    0 0 28px rgba(255,255,255,0.3);
}

[data-particle-color-mode=gradient] .text-underlined.ready-to-glow:hover {
  text-shadow:
    -14px 0 18px var(--accent-glow-a),
    0 0 18px var(--accent-glow-b),
    14px 0 18px var(--accent-glow-c),
    -22px 0 36px var(--accent-glow-a),
    22px 0 36px var(--accent-glow-c);
}

/* ---- Unshaped field canvas ---- */
.unshaped-field-container {
  position: relative;
  overflow: hidden;
}

.unshaped-field-container canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Python f-string styled contact form ===== */
.py-form {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.85;
  color: var(--form-text, #fff);
  letter-spacing: 0.01em;
}

.py-form__wrapper {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  position: relative;
}

.py-line {
  display: block;
  padding: 0.05rem 0;
  white-space: normal;
}

.py-line.py-blank {
  height: 0.6rem;
  padding: 0;
}

.py-indent {
  padding-left: 0;
}

.py-indent-2 {
  padding-left: 2.25rem;
}

/* Python syntax colors */
.py-kw {
  color: var(--syntax-keyword);
  font-weight: 600;
}

.py-var {
  color: var(--syntax-variable);
}

.py-op {
  color: var(--syntax-operator);
}

.py-str {
  color: var(--syntax-string);
}

.py-comment {
  color: var(--syntax-comment);
  font-style: italic;
}

.py-brace {
  color: var(--syntax-placeholder);
  font-weight: 600;
  padding: 0 0.05em;
}

.py-bracket {
  color: var(--syntax-bracket);
  font-weight: 600;
}

/* Inputs styled like inline placeholder attributes */
.py-form .py-input,
.py-form .py-select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--syntax-placeholder) 38%, transparent);
  padding: 0 0.15em;
  margin: 0 0.1em;
  min-width: 4ch;
  outline: none;
  cursor: text;
  caret-color: var(--syntax-placeholder);
  vertical-align: baseline;
  text-align: left;
}

.py-form .py-select {
  cursor: pointer;
  border-bottom: 0;
  padding-right: 1.1em;
  background-image: linear-gradient(45deg, transparent 50%, var(--syntax-placeholder) 50%),
                    linear-gradient(135deg, var(--syntax-placeholder) 50%, transparent 50%);
  background-position: calc(100% - 0.55em) 0.6em, calc(100% - 0.25em) 0.6em;
  background-size: 0.3em 0.3em, 0.3em 0.3em;
  background-repeat: no-repeat;
}

.py-form .py-select:required:invalid {
  color: var(--syntax-placeholder) !important;
  font-style: italic;
}

.py-form .py-select option {
  background: #0b0d10;
  color: #fff;
  font-style: normal;
}

.py-form .py-select option[value=""] {
  color: var(--syntax-placeholder);
}

.py-form .py-input--long {
  min-width: min(100%, var(--py-input-width, 28ch));
  width: min(100%, var(--py-input-width, 28ch));
  max-width: 100%;
}

.py-form #Problem-area-desk,
.py-form #Problem-area-mobile {
  --py-input-width: 16ch;
}

.py-form #Current-situation-desk,
.py-form #Current-situation-mobile {
  --py-input-width: 25ch;
}

.py-form #Desired-outcome-desk,
.py-form #Desired-outcome-mobile {
  --py-input-width: 18ch;
}

.py-form #Tech-stack-desk,
.py-form #Tech-stack-mobile {
  --py-input-width: 23ch;
}

.py-form #Team-context-desk,
.py-form #Team-context-mobile {
  --py-input-width: 15ch;
}

.py-form #Notes-desk,
.py-form #Notes-mobile {
  --py-input-width: 22ch;
}

.py-form #Contact-at-desk,
.py-form #Contact-at-mobile {
  --py-input-width: 20ch;
}

.py-form .py-input:focus,
.py-form .py-select:focus {
  border-bottom-color: var(--syntax-placeholder);
  color: #fff;
}

.py-form .py-select:required:invalid,
.py-form .py-select:required:invalid:focus {
  color: var(--syntax-placeholder) !important;
}

.py-form .py-input::placeholder {
  color: var(--syntax-placeholder);
  font-style: italic;
}

/* Auto-size text inputs to placeholder/value width */
.py-form .py-input {
  width: auto;
}

/* Checkbox list items, styled like commented strings with a toggle */
.py-form .py-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
  user-select: none;
}

.py-form .py-item input[type="checkbox"],
.py-form .py-item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid color-mix(in srgb, var(--syntax-placeholder) 42%, rgba(255, 255, 255, 0.35));
  border-radius: 2px;
  background: transparent;
  position: relative;
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.py-form .py-item input[type="radio"] {
  border-radius: 50%;
}

.py-form .py-item input[type="checkbox"]:checked,
.py-form .py-item input[type="radio"]:checked {
  background: var(--syntax-placeholder);
  border-color: var(--syntax-placeholder);
}

.py-form .py-item input[type="checkbox"]:checked::after,
.py-form .py-item input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 0.18em;
  top: 0.02em;
  width: 0.25em;
  height: 0.5em;
  border: solid #0b0d10;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.py-form .py-item input[type="radio"]:checked::after {
  left: 50%;
  top: 50%;
  width: 0.34em;
  height: 0.34em;
  background: #0b0d10;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.py-form .py-item input[type="checkbox"]:checked + .py-str,
.py-form .py-item input[type="radio"]:checked + .py-str {
  color: var(--syntax-string);
  text-decoration: none;
}

.py-form .py-item:not(:has(input:checked)) .py-str {
  color: color-mix(in srgb, var(--syntax-string) 45%, transparent);
}

/* Two-line textareas rendered as ruled dashed lines (no box) */
.py-form textarea.py-input {
  resize: none;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.35;
}

.py-form textarea.py-input--two-line {
  display: inline-block;
  vertical-align: top;
  width: min(100%, 40ch);
  min-height: calc(2 * 1.35em);
  border-bottom: 0;
  padding: 0;
  margin: 0 0.1em;
  line-height: 1.35;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent 4px, #030405 4px, #030405 8px),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(1.35em - 1px),
      color-mix(in srgb, var(--syntax-placeholder) 45%, transparent) calc(1.35em - 1px),
      color-mix(in srgb, var(--syntax-placeholder) 45%, transparent) 1.35em
    );
  background-repeat: repeat;
}

.py-form textarea.py-input--two-line:focus {
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent 4px, #030405 4px, #030405 8px),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(1.35em - 1px),
      var(--syntax-placeholder) calc(1.35em - 1px),
      var(--syntax-placeholder) 1.35em
    );
}

/* Array field rendered as a multi-line block (like the signals list) */
.py-form .py-array-input {
  display: block;
}

.py-form .py-array-items {
  display: block;
}

.py-form .py-array-item-line .py-str {
  color: var(--syntax-string);
}

.py-form .py-array-remove {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: 1;
  color: var(--syntax-placeholder);
  background: transparent;
  border: 0;
  padding: 0 0.1em;
  margin-left: 0.35em;
  cursor: pointer;
}

.py-form .py-array-remove:hover {
  color: #fff;
}

.py-form .py-array-entry-line {
  display: block;
}

.py-form .py-array-entry {
  min-width: 24ch;
  width: min(100%, 24ch);
}

/* Custom dropdown (replaces the native select UI) */
.py-form .py-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

.py-form .py-select-shell {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

.py-form .py-select-trigger {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--syntax-placeholder) 38%, transparent);
  padding: 0 0.15em;
  margin: 0 0.1em;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  line-height: inherit;
  outline: none;
}

.py-form .py-select-trigger:focus-visible {
  border-bottom-color: var(--syntax-placeholder);
}

.py-form .py-select-label {
  color: #fff;
}

.py-form .py-select-shell.is-placeholder .py-select-label {
  color: var(--syntax-placeholder);
  font-style: italic;
}

.py-form .py-select-caret {
  font-size: 0.8em;
  color: var(--syntax-placeholder);
  transition: transform 160ms ease;
}

.py-form .py-select-shell.is-open .py-select-caret {
  transform: rotate(180deg);
}

.py-form .py-select-menu {
  position: absolute;
  top: calc(100% + 0.4em);
  left: 0;
  z-index: 30;
  min-width: max(100%, 14ch);
  display: none;
  flex-direction: column;
  gap: 0.1em;
  background: #0b0d10;
  border: 1px solid color-mix(in srgb, var(--syntax-placeholder) 30%, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  padding: 0.3em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.py-form .py-select-shell.is-open .py-select-menu {
  display: flex;
}

.py-form .py-select-option {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: left;
  color: #fff;
  background: transparent;
  border: 0;
  padding: 0.35em 0.6em;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.py-form .py-select-option:hover,
.py-form .py-select-option:focus-visible {
  background: color-mix(in srgb, var(--syntax-placeholder) 22%, transparent);
  outline: none;
}

.py-form .py-select-option[aria-selected="true"] {
  color: var(--syntax-string);
}

@media (max-width: 768px) {
  .py-form {
    font-size: 13px;
  }
  .py-form .py-brace:has(+ .py-input),
  .py-form .py-brace:has(+ .py-select),
  .py-form .py-brace:has(+ .py-select-shell),
  .py-form .py-brace:has(+ .py-bracket) {
    display: inline-block;
    margin-top: 0.15em;
  }
  .py-form .py-brace:has(+ .py-input)::before,
  .py-form .py-brace:has(+ .py-select)::before,
  .py-form .py-brace:has(+ .py-select-shell)::before,
  .py-form .py-brace:has(+ .py-bracket)::before {
    content: "";
    display: block;
  }
  .py-form .py-input--long {
    min-width: min(100%, var(--py-input-width, 26ch));
    width: min(100%, var(--py-input-width, 26ch));
  }
}

/* ===== Submit / Send button ===== */
.submit-button {
  background: #030405 !important;
  color: #fff !important;
  border: 1.5px solid #fff !important;
  cursor: pointer;
  height: 2.5em;
  transition: background 240ms ease, border-color 240ms ease, box-shadow 240ms ease, color 240ms ease;
}

.footer-social-links {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  align-items: center;
  display: inline-flex;
}

.footer-social-link {
  border: 1px solid currentColor;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.35em;
  height: 1.35em;
  display: inline-flex;
}

.footer-social-link::before {
  content: "";
  width: .62em;
  height: .62em;
  background: currentColor;
  display: block;
}

.footer-social-link--github::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2.14c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.56-.29-5.25-1.28-5.25-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.17 1.18a10.98 10.98 0 0 1 5.76 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.77.11 3.06.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.4-5.27 5.69.41.36.78 1.06.78 2.14v3.14c0 .31.21.67.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2.14c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.56-.29-5.25-1.28-5.25-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.47.11-3.06 0 0 .97-.31 3.17 1.18a10.98 10.98 0 0 1 5.76 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.77.11 3.06.74.81 1.19 1.84 1.19 3.1 0 4.43-2.7 5.4-5.27 5.69.41.36.78 1.06.78 2.14v3.14c0 .31.21.67.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.footer-social-link--linkedin::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.34 8.75H1.78V22h3.56V8.75ZM3.56 2C2.42 2 1.5 2.92 1.5 4.06c0 1.13.92 2.05 2.06 2.05 1.13 0 2.05-.92 2.05-2.05C5.61 2.92 4.69 2 3.56 2Zm18.94 12.46c0-3.56-1.9-5.21-4.43-5.21-2.04 0-2.96 1.12-3.47 1.91V8.75h-3.41V22h3.56v-6.55c0-1.73.33-3.4 2.47-3.4 2.11 0 2.14 1.97 2.14 3.51V22h3.56l-.02-7.54Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.34 8.75H1.78V22h3.56V8.75ZM3.56 2C2.42 2 1.5 2.92 1.5 4.06c0 1.13.92 2.05 2.06 2.05 1.13 0 2.05-.92 2.05-2.05C5.61 2.92 4.69 2 3.56 2Zm18.94 12.46c0-3.56-1.9-5.21-4.43-5.21-2.04 0-2.96 1.12-3.47 1.91V8.75h-3.41V22h3.56v-6.55c0-1.73.33-3.4 2.47-3.4 2.11 0 2.14 1.97 2.14 3.51V22h3.56l-.02-7.54Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.contact__legal {
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 1.25em;
}

.contact__legal > .contact-footer-links {
  justify-self: center;
}

.submit-button:hover {
  background: var(--accent-hover) !important;
  color: var(--accent-text-on-hover) !important;
  border-color: #fff !important;
}

.contact-location-line {
  background: var(--accent-image) !important;
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);
          mask-image: linear-gradient(to right, #000 50%, transparent 50%);
  -webkit-mask-size: 10px 100%;
          mask-size: 10px 100%;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  border: 0 !important;
  height: 2px !important;
}

/* ------------------------------------------------------------------ */
/* Grid placements — hand-written replacements for generated grid IDs */
/* ------------------------------------------------------------------ */

/* Hero top menu: 5-col grid (6fr 6fr 3.7fr 3.3fr 1fr).               */
/* Description sits in col 2, desktop menu sits in col 4.            */
.hero-top-menu > .section-main_description { grid-column: 2 / 3; grid-row: 1; }
.hero-top-menu > .desktop__menu-items       { grid-column: 4 / 5; grid-row: 1; }

/* Contact section: 2-col grid (3fr 7fr) on desktop.                  */
/* Info block on the left, desktop form on the right.                 */
.block-contacts-form > .contacts-block      { grid-column: 1 / 2; grid-row: 1; }
.block-contacts-form > .form-block_desktop  { grid-column: 2 / 3; grid-row: 1; }
.block-contacts-form > .mobile-form-block   { grid-column: 1 / 2; grid-row: 2; }

/* Inner contact-form is its own 3-col grid (3fr 2.75fr 8.25fr).      */
/* The image takes col 1, form sits in col 3 — col 2 is the gutter.  */
.contact-form > .form_desktop,
.contact-form > .mobile-form               { grid-column: 3 / 4; grid-row: 1; }

/* Legal row at the bottom of the contact block: privacy link to the right. */
.contact__legal > .privacy-policy           { justify-self: end; }

/* Case page (service.html) ------------------------------------------ */
.case-title_credits-wraper > .case_title_link-wraper { grid-column: 2 / 3; grid-row: 1; }
.case-title_credits-wraper > .case_title_credits     { grid-column: 2 / 3; grid-row: 2; }
.case_about_grid > .case_about_content               { grid-column: 2 / 3; grid-row: 1; }
.case_about_paragraph_grid > .case_about_paragraph   { grid-column: 2 / 3; }
.key_stycky_descr > .text-m                          { grid-column: 2 / 3; }

/* Footer (project.html): copyright spans both columns, privacy goes right. */
.footer > .text-s          { grid-column: 1 / 3; grid-row: 1; }
.footer > .footer_links    { grid-column: 1 / 2; grid-row: 2; }
.footer > .privacy-policy  { justify-self: end; }

/* Logo outer glow — colorful (gradient) mode only ------------------- */
.logo-image { position: relative; isolation: isolate; }

/* Rotating logo (replaces stippled video rotator) ------------------- */
.logo-rotator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.logo-rotator__img {
  width: 60%;
  height: auto;
  max-height: 80%;
  object-fit: contain;
  transition: filter .35s ease;
}
[data-particle-color-mode=gradient] .logo-rotator__img {
  filter: none;
}
#our-ethos .logo-rotator__img {
  filter: none;
}

/* ========= Mobile hero logo ========= */
.mobile-hero-logo {
  display: none;
}

@media screen and (max-width: 767px) {
  /* Show logo centered in the upper area of the hero instead of the terrain */
  .mobile-hero-logo {
    display: block;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42%;
    max-width: 180px;
    z-index: 1;
    pointer-events: none;
  }

  /* Fix UNSHAPED running off screen — use viewport-relative sizing */
  .h1-main {
    font-size: 12.5vw !important;
    letter-spacing: 0.1em !important;
    margin-right: -0.1em !important;
  }

  /* Allow h1 to be fully visible (was clipping due to overflow:hidden) */
  .main_header__wrapper {
    overflow: visible !important;
  }

  /* Service page: credits wraper collapses to 1 column at this breakpoint,
     but both children have grid-column: 2/3 in the global placement block,
     which pushes them into an implicit off-screen column. Reset here. */
  .case-title_credits-wraper > .case_title_link-wraper,
  .case-title_credits-wraper > .case_title_credits {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media screen and (max-width: 479px) {
  /* About section: grid collapses to 1 column but content is still pinned
     to grid-column 2, pushing it off-screen. Reset to natural flow. */
  .case_about_grid > .case_about_content {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  /* Key-ideas mobile images: auto-placed into the narrow 1fr column.
     Span both columns so the image fills the full row width. */
  .key-ideas_image--mobile {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Standalone service pages ------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.service-page {
  --service-border: rgba(255, 255, 255, 0.42);
  --service-border-soft: rgba(255, 255, 255, 0.18);
  --service-panel: rgba(255, 255, 255, 0.018);
  --service-panel-strong: rgba(255, 255, 255, 0.032);
  --service-muted: rgba(255, 255, 255, 0.62);
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.service-hero,
.service-content,
.service-next {
  margin-left: 1em;
  margin-right: 1em;
}

.service-hero {
  padding-top: 7em;
  padding-bottom: 5em;
  border-bottom: 1px dashed var(--text-dark);
}

.service-breadcrumb,
.service-number,
.service-label,
.service-meta,
.service-proof-note,
.service-faq-answer,
.service-tool-output,
.service-next-label {
  color: var(--service-muted) !important;
}

.service-breadcrumb,
.service-number,
.service-label,
.service-next-label {
  font-size: 0.875em;
  line-height: 1.25;
}

.service-breadcrumb {
  margin-bottom: 3em;
}

.service-breadcrumb a,
.service-inline-link {
  color: var(--text) !important;
  text-decoration: none;
}

.service-breadcrumb span {
  opacity: 0.45;
  margin: 0 0.5em;
}

.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20em, 0.8fr);
  gap: 4em;
  align-items: end;
}

.service-number {
  margin-bottom: 1em;
}

.service-title {
  max-width: 8.5em;
  margin: 0;
  font-size: 8em;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0;
}

.service-lead {
  max-width: 42em;
  margin: 0;
  font-size: 1.45em;
  font-weight: 300;
  line-height: 1.35;
}

.service-sub {
  max-width: 42em;
  margin: 1em 0 0;
  color: var(--service-muted) !important;
  font-size: 1.05em;
  line-height: 1.55;
}

.service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 2em;
}

.service-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
  padding: 0.75em 1.15em;
  border: 1.5px solid var(--text);
  border-radius: 2em;
  background: var(--bg);
  color: var(--text) !important;
  text-decoration: none;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}

.service-button:hover,
.service-button:focus-visible {
  background: var(--accent-hover);
  border-color: var(--text);
  color: var(--accent-text-on-hover) !important;
  box-shadow: 0 0 22px var(--accent-glow-soft, rgba(255, 255, 255, 0.25));
}

.service-button.secondary {
  background: transparent;
  border-color: var(--service-border);
}

.service-button.secondary:hover,
.service-button.secondary:focus-visible {
  background: transparent;
  border-color: var(--accent-glow-b, var(--text));
  color: var(--accent-glow-b, var(--text)) !important;
  box-shadow: 0 0 22px var(--accent-glow-soft, rgba(255, 255, 255, 0.25));
}

.service-visual {
  position: relative;
  overflow: hidden;
  margin-top: 4em;
  border-top: 1px dashed var(--service-border);
  border-bottom: 1px dashed var(--service-border);
  background: transparent;
}

.service-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(3, 4, 5, 0.42) 24%, rgba(3, 4, 5, 0) 56%),
    linear-gradient(180deg, rgba(3, 4, 5, 0.08), var(--bg) 118%);
  pointer-events: none;
}

.service-visual img {
  display: block;
  width: 100%;
  max-height: min(42em, 48vh);
  aspect-ratio: 21 / 8;
  object-fit: cover;
  object-position: center;
  opacity: 0.76;
  filter: saturate(0.9) brightness(0.72);
}

.service-content {
  padding: 5em 0 2em;
}

.service-section {
  display: grid;
  grid-template-columns: minmax(10em, 0.32fr) minmax(0, 0.68fr);
  gap: 4em;
  padding: 4em 0;
  border-bottom: 1px dashed var(--service-border-soft);
}

.service-section-heading {
  margin: 0;
  font-size: 3em;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
}

.service-stack {
  display: grid;
  gap: 1em;
}

.service-check {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  gap: 0.75em;
  align-items: start;
  font-size: 1.2em;
  line-height: 1.45;
}

.service-check::before {
  content: "";
  width: 0.78em;
  height: 0.42em;
  margin-top: 0.35em;
  border-left: 1.5px solid var(--accent-glow-b, var(--accent));
  border-bottom: 1.5px solid var(--accent-glow-b, var(--accent));
  transform: rotate(-45deg);
}

.service-steps,
.service-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75em;
}

.service-tool-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75em;
}

.service-step,
.service-proof,
.service-tool,
.service-cta {
  border: 1px dashed var(--service-border-soft);
  border-radius: 0;
  background: var(--service-panel);
}

.service-step,
.service-proof,
.service-tool {
  padding: 1.25em;
}

.service-step-title,
.service-proof-title,
.service-faq-question,
.service-cta-title,
.service-tool-question {
  margin: 0;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 1.35;
}

.service-step-copy,
.service-proof-copy {
  margin: 0.5em 0 0;
  color: var(--service-muted) !important;
  line-height: 1.5;
}

.service-proof-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-proof-top {
  display: flex;
  justify-content: space-between;
  gap: 1.25em;
  align-items: flex-start;
}

.service-stat {
  min-width: 6em;
  text-align: right;
}

.service-stat-number {
  display: block;
  font-size: 2em;
  font-weight: 300;
  line-height: 1;
}

.service-proof-tags,
.service-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 1em;
}

.service-tag,
.service-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.2em;
  padding: 0.35em 0.85em;
  border: 1px dashed var(--service-border-soft);
  border-radius: 999px;
  color: var(--service-muted) !important;
  line-height: 1.2;
}

.service-pill {
  color: var(--text) !important;
}

.service-tool {
  background: var(--service-panel-strong);
  position: relative;
}

.service-tool.is-cookie-locked {
  min-height: 10em;
  overflow: hidden;
}

.service-tool.is-cookie-locked > :not(.service-tool-cookie-lock) {
  filter: blur(0.45em);
  opacity: 0.34;
  pointer-events: none;
  user-select: none;
}

.service-tool-cookie-lock {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(3, 4, 5, 0.48);
  color: var(--text) !important;
  cursor: pointer;
  font: inherit;
  font-size: 0.8em;
  text-transform: lowercase;
}

.service-tool:not(.is-cookie-locked) .service-tool-cookie-lock {
  display: none;
}

.service-tool-options {
  display: grid;
  gap: 0.5em;
  margin-top: 1em;
}

.service-tool-option {
  width: 100%;
  min-height: 3.1em;
  padding: 0.8em 1em;
  border: 1px dashed var(--service-border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--text) !important;
  text-align: left;
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

.service-tool-option:hover,
.service-tool-option:focus-visible,
.service-tool-option.is-active {
  background: var(--accent-hover);
  border-color: var(--text);
  box-shadow: 0 0 22px var(--accent-glow-soft, rgba(255, 255, 255, 0.25));
  color: var(--accent-text-on-hover) !important;
}

.service-tool-output {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px dashed var(--service-border-soft);
  line-height: 1.55;
}

.service-tool-output strong,
.service-tool-output .service-tool-highlight {
  color: var(--text) !important;
  font-weight: 400;
}

.service-range-row {
  display: grid;
  grid-template-columns: minmax(8em, 0.4fr) minmax(8em, 1fr) minmax(4em, 0.2fr);
  gap: 1em;
  align-items: center;
  margin-bottom: 0.9em;
}

.service-range-row input[type="range"] {
  --range-progress: 0%;
  width: 100%;
  height: 0.42em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 var(--range-progress), rgba(255, 255, 255, 0.84) var(--range-progress) 100%),
    var(--particle-gradient);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.service-range-row input[type="range"]:focus-visible {
  outline: 1px solid var(--accent-glow-b, var(--text));
  outline-offset: 0.45em;
}

.service-range-row input[type="range"]::-webkit-slider-runnable-track {
  height: 0.42em;
  border-radius: 999px;
  background: transparent;
}

.service-range-row input[type="range"]::-webkit-slider-thumb {
  width: 0.82em;
  height: 0.82em;
  margin-top: -0.2em;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--particle-gradient);
  box-shadow: 0 0 16px var(--accent-glow-soft, rgba(255, 255, 255, 0.24));
  appearance: none;
  -webkit-appearance: none;
}

.service-range-row input[type="range"]::-moz-range-track {
  height: 0.42em;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 var(--range-progress), rgba(255, 255, 255, 0.84) var(--range-progress) 100%),
    var(--particle-gradient);
}

.service-range-row input[type="range"]::-moz-range-thumb {
  width: 0.82em;
  height: 0.82em;
  border: 1px solid var(--text);
  border-radius: 50%;
  background: var(--particle-gradient);
  box-shadow: 0 0 16px var(--accent-glow-soft, rgba(255, 255, 255, 0.24));
}

.service-range-value,
.service-tool-number {
  font-size: 1.65em;
  font-weight: 300;
  line-height: 1.1;
}

.service-faq {
  padding: 1.25em 0;
  border-top: 1px dashed var(--service-border-soft);
}

.service-faq-answer {
  margin: 0.45em 0 0;
  line-height: 1.55;
}

.service-cta {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  align-items: center;
  padding: 1.5em;
}

.service-cta-copy {
  margin: 0.25em 0 0;
  color: var(--service-muted) !important;
}

.service-next {
  display: block;
  padding: 4em 0 6.5em;
  color: var(--text) !important;
  text-decoration: none;
}

.service-page > .footer {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: 2em;
  align-items: center;
}

.service-page > .footer > .text-s:not(.privacy-policy) {
  grid-column: 1 / 2;
  grid-row: 1;
}

.service-page > .footer > .footer_links {
  grid-column: 2 / 3;
  grid-row: 1;
}

.service-page > .footer > .privacy-policy {
  grid-column: 3 / 4;
  grid-row: 1;
  justify-self: end;
}

.service-next-inner {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  align-items: center;
  padding-top: 2em;
  border-top: 1px dashed var(--text-dark);
}

.service-next-title {
  margin: 0.2em 0 0;
  font-size: 4em;
  font-weight: 300;
  line-height: 0.95;
  transition: filter 240ms ease, text-shadow 240ms ease;
}

.service-next-arrow {
  width: 4em;
  min-width: 4em;
  transition: color 240ms ease, filter 240ms ease, transform 240ms ease;
}

.service-next:hover .service-next-arrow,
.service-next:focus-visible .service-next-arrow {
  color: var(--accent-hover);
  filter: drop-shadow(0 0 18px var(--accent-glow-soft, rgba(255, 255, 255, 0.25)));
  transform: translateX(0.35em);
}

.service-next:hover .service-next-title,
.service-next:focus-visible .service-next-title {
  text-shadow: 0 0 24px var(--accent-glow-soft, rgba(255, 255, 255, 0.25));
}

[data-particle-color-mode=gradient] .service-next:hover .service-next-title,
[data-particle-color-mode=gradient] .service-next:focus-visible .service-next-title {
  background: var(--accent-image);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  text-shadow: none;
}

/* Project pages and generated markdown ------------------------------ */
.section-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 1em 1em;
  padding-bottom: 0.75em;
  border-bottom: 1px dashed var(--text-dark);
  color: var(--text) !important;
}

.section-projects--portfolio {
  margin-top: 5em;
}

.projects-index-list {
  margin-top: 0;
  padding-top: 5em;
}

.project-title {
  max-width: 10em;
}

.project-credit-list {
  display: grid;
  gap: 0.65em;
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px dashed var(--service-border-soft);
}

.project-credit-list div {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 1em;
  color: var(--text) !important;
  line-height: 1.45;
}

.project-credit-list span {
  color: var(--service-muted) !important;
}

.project-visual img {
  object-position: center;
}

.project-case-section {
  grid-template-columns: minmax(10em, 0.24fr) minmax(0, 0.76fr);
}

.project-markdown {
  max-width: 74em;
  color: var(--text) !important;
}

.project-markdown h2,
.project-markdown h3,
.project-markdown h4,
.project-markdown h5,
.project-markdown h6 {
  margin: 2.2em 0 0.65em;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
}

.project-markdown h2:first-child,
.project-markdown h3:first-child,
.project-markdown h4:first-child,
.project-markdown h5:first-child,
.project-markdown h6:first-child {
  margin-top: 0;
}

.project-markdown h2 {
  font-size: clamp(2em, 5vw, 4.5em);
}

.project-markdown h3 {
  font-size: clamp(1.6em, 3vw, 3em);
}

.project-markdown h4 {
  font-size: clamp(1.25em, 2vw, 2em);
}

.project-markdown h5,
.project-markdown h6 {
  font-size: 1.08em;
  font-weight: 500;
  text-transform: uppercase;
}

.project-markdown p,
.project-markdown li,
.project-markdown blockquote,
.project-markdown figcaption,
.project-markdown td,
.project-markdown th {
  font-size: 1.08em;
  line-height: 1.65;
}

.project-markdown p {
  margin: 0 0 1.2em;
}

.project-markdown a {
  color: var(--text) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.project-markdown ul,
.project-markdown ol {
  display: grid;
  gap: 0.45em;
  margin: 0 0 1.4em;
  padding-left: 1.2em;
}

.project-markdown blockquote {
  margin: 1.6em 0;
  padding: 1.2em 1.4em;
  border-left: 1px dashed var(--text);
  background: var(--service-panel);
  color: var(--service-muted) !important;
}

.project-markdown blockquote p:last-child {
  margin-bottom: 0;
}

.project-markdown hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px dashed var(--service-border-soft);
}

.project-markdown del {
  color: var(--service-muted) !important;
}

.project-markdown pre,
.project-markdown code {
  border: 1px dashed var(--service-border-soft);
  background: var(--service-panel-strong);
  color: var(--text) !important;
}

.project-markdown code {
  padding: 0.08em 0.35em;
  font-size: 0.92em;
}

.project-markdown pre {
  max-width: 100%;
  margin: 1.5em 0;
  padding: 1em;
  overflow-x: auto;
}

.project-markdown pre code {
  padding: 0;
  border: 0;
  background: transparent;
  white-space: pre;
}

.project-markdown pre code.hljs {
  display: block;
  color: var(--text) !important;
}

.project-markdown .hljs-keyword,
.project-markdown .hljs-selector-tag,
.project-markdown .hljs-built_in,
.project-markdown .hljs-name,
.project-markdown .hljs-tag {
  color: #8fd3ff !important;
}

.project-markdown .hljs-string,
.project-markdown .hljs-title,
.project-markdown .hljs-section,
.project-markdown .hljs-attribute,
.project-markdown .hljs-literal,
.project-markdown .hljs-template-variable,
.project-markdown .hljs-variable {
  color: #d8c26e !important;
}

.project-markdown .hljs-number,
.project-markdown .hljs-symbol,
.project-markdown .hljs-bullet,
.project-markdown .hljs-addition {
  color: #8dd6a5 !important;
}

.project-markdown .hljs-comment,
.project-markdown .hljs-quote,
.project-markdown .hljs-meta {
  color: var(--service-muted) !important;
}

.project-markdown .hljs-deletion,
.project-markdown .hljs-regexp,
.project-markdown .hljs-link {
  color: #ff9e8d !important;
}

.project-markdown__task {
  display: inline-flex;
  gap: 0.5em;
  align-items: baseline;
}

.project-markdown__task input {
  width: 1em;
  height: 1em;
  margin: 0;
  accent-color: var(--text);
}

.project-markdown__math,
.project-markdown .katex-display {
  max-width: 100%;
  margin: 1.6em 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.project-markdown .katex {
  color: var(--text) !important;
  font-size: 1.05em;
}

.project-markdown__inline-image {
  max-width: 100%;
  max-height: 1.6em;
  vertical-align: text-bottom;
}

.project-markdown__figure {
  margin: 2.5em 0;
}

.project-markdown__figure img {
  display: block;
  width: 100%;
  max-height: min(46em, 76vh);
  border-top: 1px dashed var(--service-border-soft);
  border-bottom: 1px dashed var(--service-border-soft);
  object-fit: contain;
  background: var(--service-panel);
}

.project-markdown__media-link {
  display: block;
}

.project-markdown__figure figcaption {
  margin-top: 0.65em;
  color: var(--service-muted) !important;
  font-size: 0.9em;
}

.project-media-placeholder {
  margin: 1.5em 0;
  padding: 1.25em;
  border: 1px dashed var(--service-border-soft);
  color: var(--service-muted) !important;
}

.project-media-placeholder--inline {
  display: inline-block;
  margin: 0;
  padding: 0.1em 0.35em;
}

.project-markdown__footnotes {
  margin-top: 2.5em;
  padding-top: 1.2em;
  border-top: 1px dashed var(--service-border-soft);
  color: var(--service-muted) !important;
}

.project-markdown__footnotes ol {
  margin-bottom: 0;
}

.project-markdown__footnote-ref {
  font-size: 0.72em;
}

.project-markdown__footnote-back {
  margin-left: 0.35em;
}

.project-table-wrap {
  max-width: 100%;
  margin: 1.5em 0;
  overflow-x: auto;
}

.project-table-wrap table {
  width: 100%;
  min-width: 44em;
  border-collapse: collapse;
}

.project-table-wrap th,
.project-table-wrap td {
  padding: 0.85em;
  border: 1px dashed var(--service-border-soft);
  text-align: left;
  vertical-align: top;
}

.project-next .service-next-inner {
  position: relative;
}

.project-next-image {
  width: min(16em, 28vw);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.52;
  filter: saturate(0.85) brightness(0.72);
}

.blog-title {
  overflow-wrap: anywhere;
}

.blog-page .project-markdown {
  max-width: 68em;
}

.blog-index-section {
  grid-template-columns: minmax(10em, 0.24fr) minmax(0, 0.76fr);
}

.blog-index-list {
  display: grid;
  gap: 0;
  width: 100%;
}

.blog-card {
  display: grid;
  grid-template-columns: minmax(12em, 0.32fr) minmax(0, 0.68fr);
  gap: 1.25em;
  align-items: stretch;
  padding: 1.25em 0;
  border-top: 1px dashed var(--service-border-soft);
  color: var(--text) !important;
  text-decoration: none;
}

.blog-card:last-child {
  border-bottom: 1px dashed var(--service-border-soft);
}

.blog-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--service-panel);
  filter: saturate(0.86) brightness(0.72);
  opacity: 0.74;
  transition: opacity 240ms ease, filter 240ms ease;
}

.blog-card:hover .blog-card__image,
.blog-card:focus-visible .blog-card__image {
  opacity: 1;
  filter: saturate(1) brightness(0.9);
}

.blog-card__body {
  display: grid;
  align-content: start;
  gap: 0.75em;
}

.blog-card__title {
  margin: 0;
  font-size: clamp(1.5em, 2.8vw, 3em);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.blog-card__description {
  max-width: 54em;
  margin: 0;
  color: var(--service-muted) !important;
  font-size: 1.02em;
  line-height: 1.55;
}

@media screen and (max-width: 991px) {
  .service-title {
    font-size: 5.5em;
  }

  .service-hero-grid,
  .service-section {
    grid-template-columns: 1fr;
    gap: 2em;
  }

  .service-steps,
  .service-proof-grid,
  .service-tool-metrics {
    grid-template-columns: 1fr;
  }

  .project-case-section {
    grid-template-columns: 1fr;
  }

  .blog-index-section,
  .blog-card {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .service-hero {
    padding-top: 5em;
    padding-bottom: 3em;
  }

  .service-title {
    font-size: 4em;
  }

  .service-lead {
    font-size: 1.25em;
  }

  .service-content {
    padding-top: 2em;
  }

  .service-section {
    padding: 3em 0;
  }

  .service-section-heading,
  .service-next-title {
    font-size: 2.5em;
  }

  .service-proof-top,
  .service-cta,
  .service-next-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-stat {
    text-align: left;
  }

  .service-range-row {
    grid-template-columns: 1fr;
    gap: 0.45em;
  }

  .service-page > .footer {
    grid-template-columns: 1fr;
    gap: 0.75em;
    align-items: flex-start;
  }

  .service-page > .footer > .text-s:not(.privacy-policy),
  .service-page > .footer > .footer_links,
  .service-page > .footer > .privacy-policy {
    grid-column: 1 / 2;
    grid-row: auto;
    justify-self: start;
  }

  .service-page > .footer > .footer_links {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .contact__legal {
    grid-template-columns: 1fr;
    gap: 0.75em;
  }

  .contact__legal > .contact-footer-links,
  .contact__legal > .privacy-policy {
    justify-self: start;
  }

  .section-projects--portfolio {
    margin-top: 3em;
  }

  .projects-index-list {
    margin-top: 0;
    padding-top: 3em;
  }

  .project-credit-list div {
    grid-template-columns: 1fr;
    gap: 0.2em;
  }

  .project-markdown p,
  .project-markdown li,
  .project-markdown blockquote,
  .project-markdown td,
  .project-markdown th {
    font-size: 1em;
  }

  .project-next-image {
    width: 100%;
    max-width: 18em;
  }
}