@import url("_var.css");
@import url("_utilities.css");

/* Site-wide base + header/nav/hero/about/services/projects/steps/calculator/faq/contact (styles_axi_codex.css) */
@media (hover: none) {
  .service-card,
    .project,
    .calculator-options button,
    .button { transform: none !important; }
}

.bg-trigger { position: absolute; top: 0; left: 0; width: 1px; height: min(100svh, 900px); pointer-events: none; opacity: 0; }
.site-light-dimmer { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: #000; transition: opacity .12s linear; mix-blend-mode: multiply; }

.eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; letter-spacing: .04em; color: #686868; }
.dot::before { content: "▪"; margin-right: 8px; color: var(--color-ink); }
.button { display: inline-flex; align-items: center; gap: 24px; padding: 13px 18px; border: 0; border-radius: 6px; color: #fff; background: var(--color-blue); cursor: pointer; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: #006ddd; }

.site-header { position: fixed; z-index: 20; top: 0; left: 0; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; padding: 0 clamp(20px, 5vw, 78px); color: #fff; font-size: 14px; pointer-events: none; transition: opacity .48s cubic-bezier(.16, 1, .3, 1), transform .58s cubic-bezier(.16, 1, .3, 1), background .48s cubic-bezier(.16, 1, .3, 1); }
.site-header > * { pointer-events: auto; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 5px solid currentColor; color: #fff; font-size: 0; transform: rotate(45deg); }
.brand-mark::after { content: ""; width: 10px; height: 10px; background: currentColor; }
.main-nav { display: flex; gap: 30px; margin: auto; }
.main-nav a,
    .header-actions > a:first-child { opacity: .8; }
.main-nav a:hover { opacity: 1; }
.main-nav a,
    .header-actions > a:first-child { display: inline-block; transition: opacity .2s ease, color .2s ease; }
.main-nav a.is-scrambling,
    .header-actions > a:first-child.is-scrambling { color: #7cb5ff; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.site-header .brand-mark {
  display: block;
  width: 38px;
  height: 33px;
  border: 0;
  color: inherit;
  background: currentColor;
  transform: none;
  -webkit-mask: url('../logo_axios.svg') center / contain no-repeat;
  mask: url('../logo_axios.svg') center / contain no-repeat;
}
.site-header .brand-mark::after { display: none; }
.header-actions > a:first-child { position: relative; padding-bottom: 4px; }
.header-actions > a:first-child::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #2f7cff; }
.site-header .button { min-height: 36px; padding: 0 18px; border-radius: 4px; background: #1769ff; font-size: 14px; }
.menu-toggle { display: none; color: #fff; background: transparent; border: 1px solid #ffffff55; border-radius: 5px; padding: 8px 10px; }
body.is-steps-active .site-header { opacity: 0; transform: translateY(-18px); pointer-events: none; }

.hero { height: 240vh; min-height: 760px; color: #fff; background: #f8fbff; }
.hero-sticky { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; background: var(--gradient-hero); }
#axiosCanvas { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; }
.hero-glow { display: none; }
#tunnelFlash,
    #whiteTransition { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; }
#tunnelFlash { z-index: 1; background: linear-gradient(180deg, rgba(8,16,30,var(--tunnel-dark,1)) 0%, rgba(13,44,104,var(--tunnel-deep,1)) 28%, rgba(63,114,216,var(--tunnel-blue,1)) 62%, rgba(205,220,255,var(--tunnel-light,.7)) 86%, rgba(248,251,255,var(--tunnel-white,.6)) 100%); mix-blend-mode: screen; }
#whiteTransition { z-index: 2; background: #f8fbff; }
.hero-copy { position: absolute; z-index: 3; left: clamp(28px, 4vw, 64px); bottom: clamp(86px, 11vh, 130px); max-width: 760px; pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.hero h1 { margin: 0; max-width: 760px; font-size: var(--type-display); font-weight: 600; line-height: .95; letter-spacing: -.055em; }
.hero-eyebrow { margin: 0 0 22px; color: rgba(255,255,255,.46); font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.hero-description { max-width: 520px; margin: 22px 0 0; color: rgba(255,255,255,.46); font-size: var(--type-body); line-height: 1.45; }
.scroll-hint { position: absolute; z-index: 3; bottom: 28px; left: 50%; margin: 0; color: rgba(255,255,255,.54); font-size: 13px; letter-spacing: .04em; transform: translateX(-50%); pointer-events: none; transition: opacity .35s ease; }
body.is-inside-logo .hero-copy { opacity: 0; transform: translateY(-20px); }
body.is-inside-logo .scroll-hint { opacity: 0; }
.hero-section-label { margin: 0 0 22px; color: rgba(16,19,26,.48); font-size: 15px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }


 .services,
    .projects,
    .calculator,
    .faq { background-color: #fff; transition: background-color 1.35s cubic-bezier(.22, 1, .36, 1); }





.services { position: relative; padding: 38px var(--page-x) clamp(82px, 9vw, 130px); overflow: hidden; background: var(--color-services-bg); }
.services-inner { width: calc(100vw - var(--grid-margin) * 2); margin: 0 auto; }
.bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(260px, auto); gap: var(--grid-gutter); margin-top: 28px; perspective: 1200px; }
.service-card { position: relative; min-height: 360px; padding: 24px 24px 22px; overflow: hidden; border-radius: 18px; background: var(--color-service-ux); transform: rotateX(var(--service-rx, 0deg)) rotateY(var(--service-ry, 0deg)) translateY(var(--service-y, 0px)); transform-style: preserve-3d; transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease; will-change: transform; }
.service-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--service-mx, 50%) var(--service-my, 50%), rgba(255,255,255,.34), transparent 34%); transition: opacity .22s ease; }
.bento-grid:hover .service-card { opacity: .62; }
.bento-grid .service-card:hover { --service-y: -4px; opacity: 1; box-shadow: 0 24px 70px rgba(8,43,92,.14); }
.bento-grid .service-card:hover::before { opacity: 1; }
.service-card.big { grid-column: span 7; min-height: 470px; }
.service-card.small { grid-column: span 5; min-height: 470px; }
.service-card-ux { background: var(--color-service-ux); }
.service-card-marketing { background: var(--color-service-marketing); }
.service-card-analytics { background: var(--color-service-analytics); }
.service-card-development { background: var(--color-service-development); }
.service-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: inherit; transform: translateZ(28px); }
.service-num { display: block; margin-bottom: 18px; color: #30343a; font-family: var(--font-mono); font-size: var(--type-meta); font-weight: 500; line-height: 1; }
.service-title { max-width: 520px; margin: 0; font-size: var(--type-section); font-weight: 500; line-height: .96; letter-spacing: -.045em; }
.service-text { max-width: 360px; margin: auto 0 0; color: #30343a; font-size: 15px; line-height: 1.42; }
.service-visual { position: absolute; right: clamp(18px, 3vw, 44px); bottom: clamp(20px, 3vw, 42px); width: min(43%, 380px); height: min(52%, 360px); object-fit: contain; pointer-events: none; transform: translateZ(18px) translate3d(var(--service-art-x, 0px), var(--service-art-y, 0px), 0); transition: transform .22s ease; }
.service-card:hover .service-visual { --service-art-y: -8px; }
.service-card.small .service-visual { width: min(56%, 300px); height: min(46%, 300px); }

.projects { position: relative; z-index: 1; display: block; height: 400svh; padding-bottom: 100svh; isolation: isolate; }
.project { position: sticky; top: 0; display: flex; gap: 4.2vw; height: 100svh; min-height: 720px; margin-bottom: -100svh; padding-block: clamp(100px, 15.3vh, 165px); overflow: hidden; pointer-events: none; }
.project.is-case-active { pointer-events: auto; }
.project:nth-of-type(1) { z-index: 1; }
.project:nth-of-type(2) { z-index: 2; }
.project:nth-of-type(3) { z-index: 3; }
.project:nth-of-type(4) { z-index: 4; }
.project-copy { display: flex; flex: 0 1 29.4%; flex-direction: column; justify-content: space-between; min-width: 280px; }
.project h3 { margin: 42px 0 20px; font-size: clamp(44px, 4.8vw, 88px); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.project-copy > div > p:last-child { max-width: 430px; font-size: 17px; line-height: 1.28; }
.project figure { position: relative; flex: 1; min-height: 0; margin: 0; }
.project figure img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radius-md); }
.has-case-motion .project { --case-copy-opacity: 0; --case-copy-y: 0px; --case-media-opacity: 1; --case-media-y: 100svh; --case-image-y: 0px; --case-image-scale: 1; --case-clip: 0%; }
.has-case-motion .project:first-of-type { --case-copy-opacity: 1; --case-media-y: 0px; }
.has-case-motion .project-copy { opacity: var(--case-copy-opacity); transform: translate3d(0, var(--case-copy-y), 0); transition: opacity .3s ease; will-change: opacity, transform; }
.has-case-motion .project figure { overflow: hidden; opacity: var(--case-media-opacity); transform: translate3d(0, var(--case-media-y), 0); will-change: transform; }
.has-case-motion .project figure img { transform: translate3d(0, var(--case-image-y), 0) scale(var(--case-image-scale)); transform-origin: center; will-change: transform; }
.tags { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 6px 13px; border: 1px solid var(--color-line); border-radius: 6px; color: #777; font-size: 13px; }
.case-link { position: absolute; right: 8%; bottom: 11%; }
.client { padding-left: 58px; position: relative; }
.client span { position: absolute; left: 0; width: 42px; height: 30px; border-radius: 3px; background: url("../case-kubanstroy.jpg") center/cover; }
.client small { color: #888; }

.steps { position: relative; z-index: 1; height: 400vh; margin-top: 0; padding: 0; overflow: clip; color: #fff; background: #000; isolation: isolate; }
.steps-sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; isolation: isolate; background: #000; }
.steps-sticky::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .28; background: repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0px, rgba(255,255,255,.006) 1px, transparent 1px, transparent 32px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); background-size: auto, 320px 320px; mix-blend-mode: screen; }
.steps-particles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.steps-stage { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
.steps-track { position: absolute; left: 0; top: 0; display: flex; width: max-content; height: 100%; transform: translate3d(var(--steps-x, 0px), 0, 0); will-change: transform; }
.step { position: relative; flex: 0 0 100vw; width: 100vw; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; }
.step-wrap { position: relative; width: min(1120px, calc(100vw - 90px)); height: 100%; }
.step-left-line { position: absolute; left: calc(-50vw + 100px); top: 50%; width: clamp(320px, 35vw, 670px); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(166,214,255,.28) 15%, rgba(242,248,255,.92) 100%); box-shadow: 0 0 10px rgba(117,188,255,.15); transform: translateY(-10px); }
.step-cluster { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: 210px minmax(320px, 500px); align-items: center; gap: 54px; min-width: min(760px, calc(100vw - 100px)); transform: translate(-50%, -50%); }
.step-visual { position: relative; display: grid; place-items: center; width: 210px; height: 210px; overflow: visible; border-radius: 20px; background: transparent; box-shadow: none; }
.step-visual img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(0,136,255,.18)); }
.step-copy { position: relative; z-index: 2; width: min(100%, 500px); transform: none; }
.step-copy::before { content: ""; position: absolute; top: 66px; left: 0; width: 37px; height: 37px; border-radius: 50%; overflow: hidden; background: linear-gradient(90deg, #ffc75a 0 44%, #6f62fb 45% 100%); box-shadow: 0 0 26px rgba(75,141,255,.28); transform: translateX(-62px); }
.step-copy::after { content: ""; position: absolute; top: 70px; left: -29px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,199,92,.8); }
.step-copy span { display: block; margin: 0 0 18px; color: rgba(255,255,255,.56); font-family: var(--font-calculator); font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.step h3 { max-width: 520px; margin: 0 0 22px; color: #f6f0e7; font-family: var(--font-calculator); font-size: clamp(24px, 2vw, 34px); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.step p { max-width: 410px; margin: 0; color: rgba(255,255,255,.62); font-family: var(--font-calculator); font-size: clamp(14px, 1vw, 17px); font-weight: 400; line-height: 1.5; letter-spacing: -.02em; }
.steps-bottom-progress { position: absolute; z-index: 8; left: clamp(22px, 3vw, 46px); bottom: 34px; display: flex; align-items: center; gap: 16px; color: rgba(94,142,224,.7); font-size: 15px; font-weight: 400; }
.steps-progress-dots { display: flex; gap: 7px; }
.steps-progress-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(95,147,238,.55); box-shadow: 0 0 10px rgba(74,140,255,.24); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.steps-progress-dots i.active { background: #98c9ff; box-shadow: 0 0 14px rgba(130,186,255,.8); transform: scale(1.15); }
.steps-bottom-wave { position: absolute; z-index: 8; right: clamp(30px, 4vw, 72px); bottom: 30px; width: 62px; height: 34px; opacity: .85; filter: drop-shadow(0 0 12px rgba(86,150,255,.38)); }
.steps-bottom-wave path { fill: none; stroke: rgba(85,151,255,.85); stroke-linecap: round; stroke-width: 2; }
.has-step-motion .step { opacity: .22; transition: opacity .35s ease; }
.has-step-motion .step.is-step-visible { opacity: 1; }

.calculator { position: relative; z-index: 9; padding-top: 140px; padding-bottom: 140px; }
.calculator-panel { display: flex; align-items: center; justify-content: center; width: min(1462px, 76.15vw); min-height: 860px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-md); background: #eff3f9; }
.calculator-inner { display: flex; flex-direction: column; align-items: center; gap: 100px; width: min(1025px, 70.1%); font-family: var(--font-calculator); }
.calculator-heading { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; text-align: center; }
.calculator-label { display: flex; align-items: center; gap: 10px; margin: 0; color: #0c1018; font-size: 24px; line-height: 1.2; }
.calculator-label span { width: 8px; height: 8px; border-radius: 1px; background: #707070; }
.calculator-heading h2 { margin: 0; color: #000; font-size: clamp(42px, 3.25vw, 62px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.calculator-content { display: flex; flex-direction: column; align-items: center; gap: 50px; width: 100%; }
.calculator-progress { position: relative; width: 320px; padding-top: 42px; }
.calculator-progress-value { position: absolute; top: 0; left: 20%; padding: 8px 12px; border-radius: 8px; color: #404040; background: #fff; box-shadow: 0 12px 16px -4px #00000014, 0 4px 6px -2px #00000008; font-size: 12px; font-weight: 600; line-height: 18px; transform: translateX(-50%); }
.calculator-progress-track { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: #fff; }
.calculator-progress-track span { display: block; width: 20%; height: 100%; border-radius: inherit; background: #026eed; transition: width .35s ease; }
.calculator-question { width: 100%; margin: 0; padding: 0; border: 0; }
.calculator-question legend { margin-bottom: 20px; padding: 0; color: #2d2d2d; font-size: 24px; font-weight: 700; line-height: 1.3; }
.calculator-options { display: flex; flex-wrap: wrap; gap: 20px; }
.calculator-options button { flex: 1 1 calc(50% - 10px); min-width: 0; padding: 30px; border: 0; border-radius: 10px; color: #2f2f2f; background: #fff; text-align: left; font-size: 20px; line-height: 1; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.calculator-options button:hover { transform: translateY(-2px); }
.calculator-options button:focus-visible { outline: 3px solid #026eed55; outline-offset: 3px; }
.calculator-options button.is-selected { color: #fff; background: #026eed; }

.calculator {
  overflow: hidden;
  padding-top: 120px;
  padding-bottom: 120px;
  background: #f9f9f8 !important;
}
.calculator::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.calculator-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 860px;
  border-radius: 0;
  background: transparent;
}
.calculator-inner {
  width: min(1180px, calc(100% - 48px));
  gap: clamp(54px, 7vw, 104px);
}
.calculator-heading {
  align-items: flex-start;
  text-align: left;
}
.calculator-label {
  color: #087cf0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(8,124,240,.3);
}
.calculator-label span {
  display: none;
}
.calculator-heading h2 {
  max-width: 980px;
  color: #111215;
  font-size: clamp(46px, 6.2vw, 118px);
  font-weight: 800;
  line-height: .86;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.calculator-content {
  align-items: stretch;
  gap: clamp(34px, 5vw, 74px);
}
.calculator-progress {
  width: 100%;
  padding-top: 0;
}
.calculator-progress-value {
  position: static;
  display: block;
  margin-bottom: 14px;
  padding: 0;
  color: rgba(17,18,21,.46);
  background: transparent;
  box-shadow: none;
  font-family: var(--font-mono);
  letter-spacing: .06em;
  transform: none;
}
.calculator-progress-track {
  height: 1px;
  overflow: visible;
  border-radius: 0;
  background: rgba(0,210,255,.16);
  box-shadow: 0 0 18px rgba(8,124,240,.18);
}
.calculator-progress-track span {
  position: relative;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(8,124,240,.15), #00d2ff);
  box-shadow: 0 0 22px rgba(0,210,255,.65);
  transition: width .72s var(--ease-aww);
}
.calculator-progress-track span::after {
  content: "";
  position: absolute;
  right: -8px;
  top: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #00d2ff;
  box-shadow: 0 0 26px rgba(0,210,255,.9);
}
.calculator-question {
  min-height: 250px;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1), filter .72s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform, filter;
}
.calculator-question.is-exiting {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(-76px, 0, 0);
}
.calculator-question.is-entering {
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(76px, 0, 0);
}
.calculator-question legend {
  margin-bottom: 26px;
  color: #111215;
  font-size: clamp(24px, 2.6vw, 42px);
  font-weight: 700;
  letter-spacing: -.045em;
}
.calculator-options {
  gap: 14px;
}
.calculator-options button {
  flex: 1 1 calc(50% - 7px);
  min-height: 78px;
  padding: 22px 24px;
  border: 1px solid rgba(0,210,255,.15);
  border-radius: 6px;
  color: #111215;
  background: rgba(255,255,255,.34);
  font-size: clamp(16px, 1.35vw, 22px);
  line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgba(8,124,240,0);
  transition: color .45s var(--ease-aww), background .45s var(--ease-aww), border-color .45s var(--ease-aww), box-shadow .45s var(--ease-aww), transform .45s var(--ease-aww);
}
.calculator-options button:hover,
    .calculator-options button.is-selected,
    .calculator-options button:focus-visible {
  color: #fff;
  border-color: rgba(0,210,255,.88);
  background: rgba(8,124,240,.78);
  box-shadow: 0 0 38px rgba(8,124,240,.24), inset 0 0 26px rgba(0,210,255,.18);
  transform: translateY(-3px);
  outline: 0;
}
.calculator-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.calculator-contact label {
  position: relative;
  display: block;
  padding-top: 22px;
}
.calculator-contact input,
    .calculator-contact textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(17,18,21,.12);
  border-radius: 0;
  padding: 13px 0 16px;
  color: #111215;
  background: transparent;
  outline: 0;
  font-size: 20px;
  letter-spacing: -.03em;
  transition: border-color .45s var(--ease-aww), box-shadow .45s var(--ease-aww);
}
.calculator-contact label span {
  position: absolute;
  left: 0;
  top: 34px;
  color: rgba(17,18,21,.42);
  pointer-events: none;
  font-size: 17px;
  letter-spacing: -.025em;
  transition: transform .45s var(--ease-aww), color .45s var(--ease-aww), font-size .45s var(--ease-aww);
}
.calculator-contact input:focus,
    .calculator-contact textarea:focus {
  border-bottom-color: #087cf0;
  box-shadow: 0 12px 34px rgba(8,124,240,.1);
}
.calculator-contact input:focus + span,
    .calculator-contact input:not(:placeholder-shown) + span,
    .calculator-contact textarea:focus + span,
    .calculator-contact textarea:not(:placeholder-shown) + span {
  color: #087cf0;
  font-size: 12px;
  transform: translateY(-32px);
}
.calculator-contact textarea {
  grid-column: 1 / -1;
  min-height: 116px;
  resize: vertical;
}
.calculator-submit {
  grid-column: 1 / -1;
  justify-content: center;
}
.calculator.is-finished .calculator-submit {
  animation: calculatorFlash .8s var(--ease-aww);
}
@keyframes calculatorFlash {
  0%, 100% { box-shadow: 0 0 34px rgba(8,124,240,.22); }
  40% { box-shadow: 0 0 90px rgba(0,210,255,.82); }
}

.faq { position: relative; z-index: 1; display: flex; gap: 10vw; padding-top: 80px; padding-bottom: 78px; }
.faq h2 { flex: 0 0 40%; margin: 0; font-size: clamp(48px, 3.75vw, 72px); font-weight: 400; line-height: .95; letter-spacing: -.05em; }
.faq-list { flex: 1; }
.faq details { margin-bottom: 14px; padding: 18px 20px; border-radius: var(--radius-sm); background: #eee; }
.faq summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-size: 18px; }
.faq summary::after { content: "+"; }.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 720px; color: #666; line-height: 1.45; }

.contact { position: relative; z-index: 2; display: flex; gap: 8vw; min-height: 940px; margin-top: 0; padding-top: 100px; padding-right: max(var(--page-x), calc((100vw - 1462px) / 2)); padding-bottom: 50px; padding-left: max(var(--page-x), calc((100vw - 1462px) / 2)); color: #fff; background: var(--gradient-hero-reversed); }
.contact::before { content: ""; position: absolute; z-index: 0; top: -520px; left: 0; width: 100%; height: 520px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,251,255,.08) 28%, rgba(219,231,251,.22) 52%, rgba(143,176,238,.38) 74%, rgba(248,251,255,.72) 100%); }
.contact-intro,
    .contact-form,
    .legal,
    .to-top { z-index: 1; }
.contact-intro { display: flex; flex: 1; flex-direction: column; }
.contact-intro h2 { margin: 0; font-size: clamp(50px, 3.75vw, 72px); font-weight: 400; line-height: 1; letter-spacing: -.05em; }
.contact-intro h2 span { color: #1684f4; }
.contact-intro nav { display: flex; flex-wrap: wrap; gap: 14px 65px; max-width: 300px; margin-top: 110px; font-size: 14px; }
.socials { display: flex; gap: 10px; margin-top: 30px; }.socials a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; color: #061020; background: #fff; font-weight: 700; }
.email { margin-top: 24px; text-decoration: underline; }.footer-brand { display: flex; align-items: center; gap: 26px; margin-top: auto; font-size: clamp(60px, 5.6vw, 108px); }.footer-brand .brand-mark { width: 72px; height: 72px; }
.contact-form { flex: 0 1 680px; padding-top: 25px; }
.contact-form h3 { font-size: 22px; }.form-row { display: flex; gap: 25px; }.form-row label { flex: 1; }
.contact-form input,
    .contact-form textarea { width: 100%; border: 0; border-radius: 6px; padding: 16px; background: #fff; }
.contact-form > label { display: block; margin-top: 30px; }.contact-form label strong { display: block; margin-bottom: 14px; font-size: 20px; }.contact-form textarea { resize: vertical; }
.contact-form small { display: block; margin: 10px 0 28px; color: #b9c8de; }.legal { position: absolute; right: max(var(--page-x), calc((100vw - 1462px) / 2)); bottom: 55px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 55px; width: 470px; font-size: 12px; color: #b6c1d2; }.to-top { position: absolute; top: 45px; right: max(var(--page-x), calc((100vw - 1462px) / 2)); padding: 10px 14px; border-radius: 6px; color: #09214b; background: #fff; }

.is-contact-overlay-open { overflow: hidden; }
.is-contact-overlay-open .site-header,
    .is-contact-overlay-open main,
    .is-contact-overlay-open footer { filter: blur(12px); transform: scale(.985); transition: filter .6s var(--ease-aww), transform .6s var(--ease-aww); }
.contact-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: clamp(22px, 5vw, 78px); color: #111215; pointer-events: none; opacity: 0; background: radial-gradient(circle at 36% 30%, rgba(8,124,240,.075) 0%, rgba(8,124,240,0) 34%), radial-gradient(circle at 70% 58%, rgba(120,132,150,.07) 0%, rgba(120,132,150,0) 38%), #f9f9f8; transition: opacity .62s var(--ease-aww); }
.contact-overlay::before { content: ""; position: absolute; inset: 0; opacity: .02; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.contact-overlay[aria-hidden="false"] { pointer-events: auto; opacity: 1; }
.contact-overlay__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, .75fr); gap: clamp(42px, 8vw, 130px); width: min(1380px, 100%); transform: translateY(42px) scale(.94); opacity: 0; transition: transform .72s var(--ease-aww), opacity .72s var(--ease-aww); }
.contact-overlay[aria-hidden="false"] .contact-overlay__inner { transform: translateY(0) scale(1); opacity: 1; }
.contact-overlay__close { position: fixed; z-index: 2; top: clamp(20px, 4vw, 58px); right: clamp(20px, 4vw, 58px); width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer; transition: transform .4s var(--ease-aww); }
.contact-overlay__close::before,
    .contact-overlay__close::after { content: ""; position: absolute; top: 20px; left: 7px; width: 28px; height: 1px; background: #111215; transition: background .4s var(--ease-aww), transform .4s var(--ease-aww); }
.contact-overlay__close::before { transform: rotate(45deg); }
.contact-overlay__close::after { transform: rotate(-45deg); }
.contact-overlay__close:hover { transform: scale(1.18); }
.contact-overlay__close:hover::before { background: #087cf0; transform: rotate(45deg) scaleX(1.16); }
.contact-overlay__close:hover::after { background: #087cf0; transform: rotate(-45deg) scaleX(1.16); }
.contact-overlay__info p { margin: 0 0 22px; color: #087cf0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.contact-overlay__info h2 { margin: 0 0 clamp(46px, 7vw, 96px); color: #111215; font-size: clamp(58px, 10vw, 176px); font-weight: 800; line-height: .78; letter-spacing: -.085em; text-transform: uppercase; text-shadow: none; }
.contact-overlay__info a { display: grid; grid-template-columns: minmax(92px, .28fr) 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid rgba(17,18,21,.1); transition: color .45s var(--ease-aww), border-color .45s var(--ease-aww), padding-left .45s var(--ease-aww); }
.contact-overlay__info a span { color: rgba(17,18,21,.44); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.contact-overlay__info a strong { font-size: clamp(22px, 2vw, 34px); font-weight: 500; letter-spacing: -.04em; }
.contact-overlay__info a:hover { color: #087cf0; border-bottom-color: #087cf0; padding-left: 16px; }
.contact-overlay__form { display: grid; align-content: center; gap: 34px; }
.contact-overlay__form label { position: relative; display: block; padding-top: 22px; }
.contact-overlay__form input,
    .contact-overlay__form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(17,18,21,.12); border-radius: 0; padding: 13px 0 16px; color: #111215; background: transparent; outline: 0; font-size: 22px; letter-spacing: -.03em; transition: border-color .45s var(--ease-aww), box-shadow .45s var(--ease-aww); resize: vertical; }
.contact-overlay__form label span { position: absolute; left: 0; top: 34px; color: rgba(17,18,21,.42); pointer-events: none; font-size: 18px; letter-spacing: -.025em; transition: transform .45s var(--ease-aww), color .45s var(--ease-aww), font-size .45s var(--ease-aww); }
.contact-overlay__form input:focus,
    .contact-overlay__form textarea:focus { border-bottom-color: #087cf0; box-shadow: 0 12px 34px rgba(8,124,240,.1); }
.contact-overlay__form input:focus + span,
    .contact-overlay__form input:not(:placeholder-shown) + span,
    .contact-overlay__form textarea:focus + span,
    .contact-overlay__form textarea:not(:placeholder-shown) + span { color: #087cf0; font-size: 12px; transform: translateY(-32px); }
.contact-overlay__form button { width: max-content; min-height: 56px; padding: 0 28px; border: 1px solid #111215; border-radius: 4px; color: #f9f9f8; background: #111215; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .45s var(--ease-aww), background .45s var(--ease-aww), border-color .45s var(--ease-aww), box-shadow .45s var(--ease-aww), transform .45s var(--ease-aww); }
.contact-overlay__form button span { display: inline-block; margin-left: 18px; transition: transform .45s var(--ease-aww); }
.contact-overlay__form button:hover { color: #fff; border-color: #087cf0; background: #087cf0; box-shadow: 0 18px 48px rgba(8,124,240,.24); transform: translateY(-2px); }
.contact-overlay__form button:hover span { transform: translateX(8px); }

@media (max-width: 900px) {
  .site-header { min-height: 64px; grid-template-columns: auto 1fr auto; padding: 0 18px; background: rgba(5,8,18,.18); backdrop-filter: blur(14px); }
  .menu-toggle { justify-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
  .main-nav { position: absolute; top: 70px; left: 18px; right: 18px; display: grid; grid-template-rows: 0fr; gap: 0; max-height: calc(100svh - 96px); padding: 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(7,20,43,.92); backdrop-filter: blur(20px); opacity: 0; overflow: hidden; pointer-events: none; transform: translateY(-8px); transition: grid-template-rows .34s var(--ease-aww), opacity .34s var(--ease-aww), transform .34s var(--ease-aww), padding .34s var(--ease-aww); }
  .main-nav.is-open { grid-template-rows: 1fr; padding: 10px 12px; opacity: 1; pointer-events: auto; transform: translateY(0); }
  .main-nav a { display: block; min-height: 44px; padding: 13px 6px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
  .main-nav a:last-child { border-bottom: 0; }
  .header-actions { display: flex; gap: 10px; }
  .site-header .button { min-height: 34px; padding: 0 13px; border-radius: 6px; font-size: 13px; }.site-header .brand-mark::after { width: 20px; height: 20px; }
  .hero { height: 230vh; min-height: 680px; }.hero-sticky { background: linear-gradient(180deg,#050812 0%,#071326 20%,#102b60 42%,#4778d6 66%,#c9d8f4 86%,#f8fbff 100%); }.hero-copy { right: 20px; bottom: 92px; left: 20px; max-width: 320px; }.hero h1 { max-width: 320px; font-size: clamp(38px,14vw,54px); line-height: .94; letter-spacing: -.06em; }.hero-eyebrow { margin-bottom: 16px; font-size: 11px; letter-spacing: .12em; }.hero-description { max-width: 300px; margin-top: 18px; font-size: 14px; line-height: 1.4; }.scroll-hint { bottom: 22px; font-size: 12px; }
  
  .services { padding: 88px var(--page-x) 110px; overflow: hidden; }.bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }.service-card.big,
    .service-card.small { grid-column: auto; min-height: 430px; }.service-card { padding: 20px; }.service-title { font-size: 34px; }.service-text { max-width: 300px; font-size: 13px; }.service-visual,
    .service-card.small .service-visual { width: 70%; height: 48%; right: 20px; bottom: 22px; }
  .projects { height: 400svh; padding-bottom: 100svh; }.project { flex-direction: column; height: 100svh; min-height: 760px; margin-bottom: -100svh; padding-block: 90px 28px; }.project-copy { flex: 0 0 auto; min-height: 350px; }.project figure { min-height: 280px; }.project figure img { min-height: 0; aspect-ratio: 1.25; }.project h3 { margin-top: 30px; }
  .steps { height: auto !important; min-height: 760px; overflow: hidden; }.steps-sticky { position: relative; height: 760px; min-height: 760px; }.steps-stage { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }.steps-stage::-webkit-scrollbar { display: none; }.steps-track { transform: none !important; }.step { flex-basis: 100vw; width: 100vw; scroll-snap-align: start; }.step-wrap { width: 100vw; }.step-left-line { display: none; }.step-cluster { grid-template-columns: 1fr; gap: 32px; justify-items: center; width: min(92vw, 640px); min-width: 0; text-align: center; }.step-visual { width: 180px; height: 180px; }.step-copy { width: min(100%, 430px); }.step-copy::before,
    .step-copy::after { display: none; }.step-copy span { margin-bottom: 18px; justify-content: center; font-size: 15px; }.step h3 { margin-bottom: 20px; font-size: 40px; }.step p { margin-inline: auto; font-size: 17px; }.steps-bottom-progress { left: 16px; bottom: 20px; font-size: 13px; }.steps-bottom-wave { right: 16px; bottom: 18px; width: 52px; }
  .calculator { padding-top: 90px; padding-bottom: 90px; }.calculator-panel { width: 100%; min-height: 720px; }.calculator-inner { gap: 70px; width: min(760px, calc(100% - 48px)); }.calculator-label { font-size: 18px; }.calculator-heading h2 { font-size: clamp(36px, 7vw, 52px); }.calculator-question legend { font-size: 21px; }
  .faq { flex-direction: column; }.faq h2 { flex: none; }
  .contact { flex-direction: column; }.contact-intro nav { margin-top: 70px; }.footer-brand { margin-top: 80px; }.contact-form { flex: none; }.legal { position: static; width: 100%; margin-top: 50px; }.to-top { top: 25px; }
}

@media (max-width: 560px) {
  :root { --page-x: 18px; }
  .hero h1 { bottom: 28px; }
  .service-card { min-height: 390px; padding: 18px; }.service-card.big,
    .service-card.small { min-height: 390px; }.service-title { font-size: 30px; }.service-num { margin-bottom: 14px; }.service-visual,
    .service-card.small .service-visual { width: 78%; height: 45%; right: 18px; bottom: 18px; }.project { min-height: 720px; padding-top: 82px; }.project-copy { min-height: 330px; }.project h3 { font-size: 48px; }
  .steps { min-height: 720px; }.steps-sticky { height: 720px; min-height: 720px; }.step-cluster { top: 52%; gap: 30px; }.step-visual { width: 168px; height: 168px; }.step h3 { font-size: 34px; }.step p { font-size: 16px; }
  .calculator { padding-top: 60px; padding-bottom: 60px; }.calculator-panel { min-height: 680px; border-radius: 16px; }.calculator-inner { gap: 56px; width: calc(100% - 32px); }.calculator-heading { gap: 20px; }.calculator-heading h2 { font-size: 34px; }.calculator-heading h2 br { display: none; }.calculator-label { font-size: 16px; }.calculator-content { gap: 38px; }.calculator-progress { width: min(280px, 88%); }.calculator-question legend { font-size: 19px; }.calculator-options { gap: 12px; }.calculator-options button { flex-basis: 100%; padding: 20px; font-size: 17px; }
  .faq { padding-top: 90px; padding-bottom: 90px; }.faq h2 { font-size: 45px; }.faq summary { font-size: 16px; }
  .contact { padding-top: 80px; }.contact-intro h2 { font-size: 48px; }.form-row { flex-direction: column; }.legal { grid-template-columns: 1fr; }.footer-brand { font-size: 43px; }
  .contact-overlay { padding: 18px; overflow-y: auto; align-items: start; }
  .contact-overlay__inner { grid-template-columns: 1fr; gap: 38px; padding-top: 72px; }
  .contact-overlay__info h2 { font-size: 56px; }
  .contact-overlay__info a { grid-template-columns: 1fr; gap: 8px; }
  .contact-overlay__form input,
    .contact-overlay__form textarea { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,
    *::before,
    *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .services { height: auto !important; overflow: hidden; } .projects { display: flex; height: auto; gap: 140px; padding-bottom: 150px; } .project { position: relative; height: auto; min-height: 660px; margin-bottom: 0; pointer-events: auto; } .has-case-motion .project-copy,
    .has-case-motion .project figure { opacity: 1; clip-path: none; transform: none; } .has-case-motion .project figure img { transform: none; } .steps { min-height: auto; }.steps-sticky { position: relative; height: auto; min-height: 0; }.steps-track { transform: none !important; }.steps-stage { overflow-x: auto; }.steps-particles { display: none; } }

/* Stability guard: no redesign, only layout safety */
html,
    body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
    body {
    overflow-x: hidden;
  }
}

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

img,
    video,
    canvas,
    svg {
  max-width: 100%;
}

section {
  position: relative;
}

.project,
    .service-card,
    .calculator-panel,
    .faq details {
  min-width: 0;
}

.hero-glow,
    .steps-particles,
    .steps-sticky::before,
    .steps-bottom-wave {
  pointer-events: none;
}

@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .projects-runway,
    .projects-runway.is-gsap-scene,
    .steps-scanner,
    .steps-scanner.is-gsap-scene {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .projects-runway .projects-track,
    .projects-runway.is-gsap-scene .projects-track,
    .steps-scanner .steps-sticky,
    .steps-scanner.is-gsap-scene .steps-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  .projects-runway .projects-track {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-inline: var(--grid-margin) !important;
  }

  .projects-runway .project,
    .projects-runway .project:nth-child(even) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    overflow: visible !important;
  }

  .projects-runway .project figure,
    .projects-runway .project:nth-child(even) figure {
    grid-column: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  .steps-scanner .steps-sticky {
    display: block !important;
  }

  .steps-scanner .steps-stage {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 80px var(--grid-margin) !important;
  }

  .steps-scanner .steps-track,
    .steps-scanner.is-gsap-scene .steps-track {
    transform: none !important;
    display: grid !important;
    gap: 28px !important;
  }

  .steps-scanner .step {
    min-height: 0 !important;
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
    *::before,
    *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Premium hero composition: scoped so the rest of the site keeps its current design. */
html body #axios-logo-journey.hero {
  position: relative !important;
  min-height: 100svh !important;
  height: 205svh !important;
  overflow: visible !important;
  color: #fff !important;
  background: #f8fbff !important;
}

html body #axios-logo-journey .hero-sticky {
  position: sticky !important;
  top: 0 !important;
  isolation: isolate !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 640px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(121,168,235,.32) 0%, rgba(56,106,187,.14) 23%, rgba(23,74,148,0) 52%),
    linear-gradient(180deg, #07162f 0%, #12376e 31%, #386abb 62%, #a9c6f3 84%, #f8fbff 100%) !important;
}

html body #axios-logo-journey .hero-sticky::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(234,243,255,.18), transparent 33%),
    radial-gradient(ellipse at center, transparent 42%, rgba(3,15,35,.2) 100%) !important;
  opacity: 1 !important;
}

html body #axios-logo-journey .hero-sticky::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: -30% !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px !important;
  opacity: .035 !important;
  mix-blend-mode: soft-light !important;
}

body:not(.is-past-hero) .axios-site-grid {
  opacity: 0 !important;
}

html body #axios-logo-journey #axiosCanvas,
    html body #axios-logo-journey #tunnelCanvas,
    html body #axios-logo-journey #tunnelFlash,
    html body #axios-logo-journey #whiteTransition {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body #axios-logo-journey #axiosCanvas {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  transform-origin: 50% 46% !important;
  will-change: transform, opacity;
}

html body #axios-logo-journey #tunnelCanvas {
  z-index: 3 !important;
  opacity: 0;
  will-change: opacity;
}

html body #axios-logo-journey #tunnelFlash {
  z-index: 4 !important;
  background:
    radial-gradient(circle at 50% 49%, rgba(121,168,235,.18), rgba(56,106,187,.1) 30%, rgba(23,74,148,.08) 58%, transparent 82%) !important;
  mix-blend-mode: screen !important;
  will-change: opacity;
}

html body #axios-logo-journey #whiteTransition {
  z-index: 5 !important;
  display: block !important;
  background: #fff !important;
  opacity: 0;
  will-change: opacity;
}

html body #axios-logo-journey .hero-copy {
  position: absolute !important;
  z-index: 7 !important;
  right: auto !important;
  bottom: clamp(42px, 7.2svh, 82px) !important;
  left: clamp(24px, 4.2vw, 80px) !important;
  width: min(680px, calc(100vw - 48px)) !important;
  max-width: 680px !important;
  color: #fff !important;
  pointer-events: auto !important;
  animation: none !important;
  will-change: opacity, transform;
}

html body #axios-logo-journey .hero-copy h1 {
  max-width: 680px !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Manrope", var(--font-sans) !important;
  font-size: clamp(46px, 4.25vw, 76px) !important;
  font-weight: 600 !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

html body #axios-logo-journey .hero-title-mask {
  display: block;
  overflow: hidden;
}

html body #axios-logo-journey .hero-title-line {
  display: block;
}

html body #axios-logo-journey .hero-description {
  max-width: 470px !important;
  margin: 20px 0 0 !important;
  color: rgba(255,255,255,.74) !important;
  font-family: "Manrope", var(--font-sans) !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.5 !important;
}

html body #axios-logo-journey .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
}

html body #axios-logo-journey .hero-primary-action,
    html body #axios-logo-journey .hero-cases-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  font-family: "Manrope", var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color .35s cubic-bezier(.16,1,.3,1), background-color .35s cubic-bezier(.16,1,.3,1), border-color .35s cubic-bezier(.16,1,.3,1);
}

html body #axios-logo-journey .hero-primary-action {
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 4px;
  color: #174a94;
  background: rgba(255,255,255,.94);
}

html body #axios-logo-journey .hero-primary-action:hover {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(23,74,148,.7);
}

html body #axios-logo-journey .hero-cases-link {
  color: rgba(255,255,255,.84);
  border-bottom: 1px solid rgba(255,255,255,.34);
}

html body #axios-logo-journey .hero-cases-link:hover {
  color: #fff;
  border-color: #fff;
}

html body:not(.is-logo-ui-ready) .axios-hero-header,
    html body:not(.is-logo-ui-ready) #axios-logo-journey .hero-copy {
  opacity: 0 !important;
  transform: translate3d(0, 22px, 0) !important;
  pointer-events: none !important;
  animation: none !important;
}

html body.is-logo-ui-ready .axios-hero-header {
  animation: axiosHeaderReveal .72s cubic-bezier(.16,1,.3,1) both !important;
}

html body.is-logo-ui-ready #axios-logo-journey .hero-copy {
  animation: axiosHeroCopyReveal .82s cubic-bezier(.16,1,.3,1) .06s both !important;
}

html body:not(.is-past-hero) .site-header.axios-hero-header,
    html body:not(.is-past-hero) .site-header.axios-hero-header.is-glass {
  min-height: 72px !important;
  padding-inline: clamp(24px, 4.2vw, 80px) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html body:not(.is-past-hero) .site-header.axios-hero-header .main-nav a,
    html body:not(.is-past-hero) .site-header.axios-hero-header .header-actions > a:first-child {
  color: rgba(255,255,255,.76) !important;
}

html body:not(.is-past-hero) .site-header.axios-hero-header .button {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}

@keyframes axiosHeaderReveal {
  from { opacity: 0; transform: translate3d(0,-14px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes axiosHeroCopyReveal {
  from { opacity: 0; transform: translate3d(0,24px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (max-width: 900px) {
  html body #axios-logo-journey.hero {
    height: 165svh !important;
    min-height: 100svh !important;
  }

  html body #axios-logo-journey .hero-sticky {
    min-height: 100svh !important;
  }

  html body #axios-logo-journey .hero-copy {
    right: 20px !important;
    bottom: clamp(34px, 5svh, 58px) !important;
    left: 20px !important;
    width: auto !important;
    max-width: 560px !important;
  }

  html body #axios-logo-journey .hero-copy h1 {
    max-width: 520px !important;
    font-size: clamp(38px, 11.5vw, 58px) !important;
  }

  html body #axios-logo-journey .hero-description {
    max-width: 340px !important;
    margin-top: 16px !important;
    font-size: 14px !important;
  }

  html body #axios-logo-journey .hero-actions {
    gap: 12px 18px;
    margin-top: 20px;
  }

  html body #axios-logo-journey .hero-primary-action,
    html body #axios-logo-journey .hero-cases-link {
    min-height: 44px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #axios-logo-journey.hero {
    height: 100svh !important;
  }

  html body #axios-logo-journey #tunnelCanvas,
    html body #axios-logo-journey #tunnelFlash,
    html body #axios-logo-journey #whiteTransition {
    display: none !important;
  }

  html body.is-logo-ui-ready .axios-hero-header,
    html body.is-logo-ui-ready #axios-logo-journey .hero-copy {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Premium hero composition: scoped so the rest of the site keeps its current design. */
html body #axios-logo-journey.hero {
  position: relative !important;
  min-height: 100svh !important;
  height: 205svh !important;
  overflow: visible !important;
  color: #fff !important;
  background: #f8fbff !important;
}

html body #axios-logo-journey .hero-sticky {
  position: sticky !important;
  top: 0 !important;
  isolation: isolate !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 640px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(121,168,235,.32) 0%, rgba(56,106,187,.14) 23%, rgba(23,74,148,0) 52%),
    linear-gradient(180deg, #07162f 0%, #12376e 31%, #386abb 62%, #a9c6f3 84%, #f8fbff 100%) !important;
}

html body #axios-logo-journey .hero-sticky::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(234,243,255,.18), transparent 33%),
    radial-gradient(ellipse at center, transparent 42%, rgba(3,15,35,.2) 100%) !important;
  opacity: 1 !important;
}

html body #axios-logo-journey .hero-sticky::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: -30% !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E") !important;
  background-size: 180px 180px !important;
  opacity: .035 !important;
  mix-blend-mode: soft-light !important;
}

body:not(.is-past-hero) .axios-site-grid {
  opacity: 0 !important;
}

html body #axios-logo-journey #axiosCanvas,
    html body #axios-logo-journey #tunnelCanvas,
    html body #axios-logo-journey #tunnelFlash,
    html body #axios-logo-journey #whiteTransition {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body #axios-logo-journey #axiosCanvas {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  transform-origin: 50% 46% !important;
  will-change: transform, opacity;
}

html body #axios-logo-journey #tunnelCanvas {
  z-index: 3 !important;
  opacity: 0;
  will-change: opacity;
}

html body #axios-logo-journey #tunnelFlash {
  z-index: 4 !important;
  background:
    radial-gradient(circle at 50% 49%, rgba(121,168,235,.18), rgba(56,106,187,.1) 30%, rgba(23,74,148,.08) 58%, transparent 82%) !important;
  mix-blend-mode: screen !important;
  will-change: opacity;
}

html body #axios-logo-journey #whiteTransition {
  z-index: 5 !important;
  display: block !important;
  background: #fff !important;
  opacity: 0;
  will-change: opacity;
}

html body #axios-logo-journey .hero-copy {
  position: absolute !important;
  z-index: 7 !important;
  right: auto !important;
  bottom: clamp(42px, 7.2svh, 82px) !important;
  left: clamp(24px, 4.2vw, 80px) !important;
  width: min(680px, calc(100vw - 48px)) !important;
  max-width: 680px !important;
  color: #fff !important;
  pointer-events: auto !important;
  animation: none !important;
  will-change: opacity, transform;
}

html body #axios-logo-journey .hero-copy h1 {
  max-width: 680px !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Manrope", var(--font-sans) !important;
  font-size: clamp(46px, 4.25vw, 76px) !important;
  font-weight: 600 !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

html body #axios-logo-journey .hero-title-mask {
  display: block;
  overflow: hidden;
}

html body #axios-logo-journey .hero-title-line {
  display: block;
}

html body #axios-logo-journey .hero-description {
  max-width: 470px !important;
  margin: 20px 0 0 !important;
  color: rgba(255,255,255,.74) !important;
  font-family: "Manrope", var(--font-sans) !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.5 !important;
}

html body #axios-logo-journey .hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 28px;
}

html body #axios-logo-journey .hero-primary-action,
    html body #axios-logo-journey .hero-cases-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  font-family: "Manrope", var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color .35s cubic-bezier(.16,1,.3,1), background-color .35s cubic-bezier(.16,1,.3,1), border-color .35s cubic-bezier(.16,1,.3,1);
}

html body #axios-logo-journey .hero-primary-action {
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 4px;
  color: #174a94;
  background: rgba(255,255,255,.94);
}

html body #axios-logo-journey .hero-primary-action:hover {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(23,74,148,.7);
}

html body #axios-logo-journey .hero-cases-link {
  color: rgba(255,255,255,.84);
  border-bottom: 1px solid rgba(255,255,255,.34);
}

html body #axios-logo-journey .hero-cases-link:hover {
  color: #fff;
  border-color: #fff;
}

html body:not(.is-logo-ui-ready) .axios-hero-header,
    html body:not(.is-logo-ui-ready) #axios-logo-journey .hero-copy {
  opacity: 0 !important;
  transform: translate3d(0, 22px, 0) !important;
  pointer-events: none !important;
  animation: none !important;
}

html body.is-logo-ui-ready .axios-hero-header {
  animation: axiosHeaderReveal .72s cubic-bezier(.16,1,.3,1) both !important;
}

html body.is-logo-ui-ready #axios-logo-journey .hero-copy {
  animation: axiosHeroCopyReveal .82s cubic-bezier(.16,1,.3,1) .06s both !important;
}

html body:not(.is-past-hero) .site-header.axios-hero-header,
    html body:not(.is-past-hero) .site-header.axios-hero-header.is-glass {
  min-height: 72px !important;
  padding-inline: clamp(24px, 4.2vw, 80px) !important;
  color: #fff !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

html body:not(.is-past-hero) .site-header.axios-hero-header .main-nav a,
    html body:not(.is-past-hero) .site-header.axios-hero-header .header-actions > a:first-child {
  color: rgba(255,255,255,.76) !important;
}

html body:not(.is-past-hero) .site-header.axios-hero-header .button {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}

@keyframes axiosHeaderReveal {
  from { opacity: 0; transform: translate3d(0,-14px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes axiosHeroCopyReveal {
  from { opacity: 0; transform: translate3d(0,24px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (max-width: 900px) {
  html body #axios-logo-journey.hero {
    height: 165svh !important;
    min-height: 100svh !important;
  }

  html body #axios-logo-journey .hero-sticky {
    min-height: 100svh !important;
  }

  html body #axios-logo-journey .hero-copy {
    right: 20px !important;
    bottom: clamp(34px, 5svh, 58px) !important;
    left: 20px !important;
    width: auto !important;
    max-width: 560px !important;
  }

  html body #axios-logo-journey .hero-copy h1 {
    max-width: 520px !important;
    font-size: clamp(38px, 11.5vw, 58px) !important;
  }

  html body #axios-logo-journey .hero-description {
    max-width: 340px !important;
    margin-top: 16px !important;
    font-size: 14px !important;
  }

  html body #axios-logo-journey .hero-actions {
    gap: 12px 18px;
    margin-top: 20px;
  }

  html body #axios-logo-journey .hero-primary-action,
    html body #axios-logo-journey .hero-cases-link {
    min-height: 44px;
    font-size: 14px;
  }

  html body:not(.is-past-hero) .site-header.axios-hero-header .header-actions .button {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #axios-logo-journey.hero {
    height: 100svh !important;
  }

  html body #axios-logo-journey #tunnelCanvas,
    html body #axios-logo-journey #tunnelFlash,
    html body #axios-logo-journey #whiteTransition {
    display: none !important;
  }

  html body.is-logo-ui-ready .axios-hero-header,
    html body.is-logo-ui-ready #axios-logo-journey .hero-copy {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Shared footer component (axi-internal-shared.css) */
.axios-page-transition__mark { display: none !important; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--axi-brand);
  outline-offset: 4px;
}

.axios-footer {
  position: relative;
  min-height: 1010px;
  padding: 130px max(80px, 11.93vw);
  color: var(--axi-on-dark);
  background: linear-gradient(180deg, var(--axi-brand-soft) 0%, var(--axi-brand-deep) 48%, var(--axi-dark) 100%);
  border-radius: 30px 30px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.axios-footer a { color: inherit; text-decoration: none; }
.axios-footer__title {
  max-width: 715px;
  margin: 0;
  font: 500 64px/1.2 Manrope, sans-serif;
  letter-spacing: -.045em;
}
.axios-footer__title em { color: var(--axi-brand); font-style: normal; }
.axios-footer__nav-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.axios-footer__nav {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  font: 500 16px/1.2 Manrope, sans-serif;
}
.axios-footer__nav a { transition: opacity .3s ease; }
.axios-footer__nav a:hover { opacity: .64; }
.axios-footer__email {
  grid-column: 1 / -1;
  margin-top: 20px;
  font-size: 24px;
  text-decoration: underline !important;
  text-underline-offset: 5px;
}
.axios-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 48px;
  color: var(--axi-on-dark);
  font: 400 14px/1.3 "Roboto Mono", monospace;
}
.axios-footer__brand {
  color: var(--axi-on-dark);
  font: 800 clamp(52px, 5vw, 72px)/1 Manrope, sans-serif;
  letter-spacing: .16em;
}
.axios-footer__legal { max-width: 360px; }
.axios-footer__top {
  position: absolute;
  top: 64px;
  right: max(80px, 11.93vw);
  z-index: 3;
  min-width: 128px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(251,253,255,.55);
  border-radius: 4px;
  background: rgba(251,253,255,.12);
  color: var(--axi-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font: 500 12px/1 Manrope, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background-color .3s var(--axi-ease), color .3s var(--axi-ease), transform .3s var(--axi-ease);
}
.axios-footer__top:hover { background: var(--axi-on-dark); color: var(--axi-ink); transform: translateY(-2px); }

@media (max-width: 900px) {
  .axios-footer { min-height: 760px; padding: 104px 24px 54px; border-radius: 18px 18px 0 0; }
  .axios-footer__title { max-width: calc(100% - 90px); font-size: clamp(40px, 12vw, 58px); }
  .axios-footer__top { top: 28px; right: 24px; min-width: 48px; width: 48px; }
  .axios-footer__top span:first-child { display: none; }
  .axios-footer__nav-wrap { grid-template-columns: 1fr; gap: 32px; }
  .axios-footer__nav { width: 100%; }
  .axios-footer__bottom { align-items: flex-start; flex-direction: column; gap: 28px; }
  .axios-footer__brand { font-size: clamp(42px, 15vw, 66px); }
}

/* About page */
    body.about-page { margin: 0; color: #0b0c10; background: #f4f5f7; font-family: Manrope, sans-serif; overflow-x: hidden; }
    .about-page .site-header { color: #fbfdff; background: rgba(5,9,20,.18); border-bottom: 1px solid rgba(220,230,248,.14); backdrop-filter: blur(18px); }
    .about-page .site-header a { color: inherit; }
    .about-hero { position: relative; min-height: 100svh; padding: 150px max(80px, 5vw) 74px; color: #fbfdff; background: radial-gradient(circle at 72% 42%, rgba(121,166,244,.24), transparent 27%), linear-gradient(180deg,#071a37 0%,#0a376c 54%,#173db8 100%); display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px; align-content: end; overflow: hidden; }
    .about-hero::after { content:""; position:absolute; inset:0; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
    .about-hero__mark { position: absolute; width: clamp(280px,42vw,760px); aspect-ratio:1; top: 50%; right: 4vw; transform: translateY(-53%); opacity:.92; background:url('../logo_axios.svg') center/contain no-repeat; filter: drop-shadow(0 34px 80px rgba(2,110,237,.3)); }
    .about-hero__eyebrow { grid-column:1/5; margin:0 0 30px; font:400 12px/1.2 "Roboto Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
    .about-hero h1 { position:relative; z-index:1; grid-column:1/10; margin:0; max-width:1320px; font-size:clamp(64px,8vw,150px); line-height:.84; letter-spacing:-.065em; text-transform:uppercase; }
    .about-hero__lead { position:relative; z-index:1; grid-column:9/13; margin:0; max-width:420px; color:rgba(251,253,255,.72); font:400 16px/1.45 "Roboto Mono",monospace; }
    .about-manifest-page { padding:clamp(110px,13vw,230px) max(80px,5vw); display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; }
    .about-manifest-page__tag { grid-column:1/3; margin:10px 0 0; color:#173db8; font:400 12px/1.4 "Roboto Mono",monospace; text-transform:uppercase; }
    .about-manifest-page h2 { grid-column:3/13; margin:0; font-size:clamp(44px,5vw,88px); line-height:1.02; letter-spacing:-.05em; font-weight:500; }
    .about-stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(24,64,118,.17); border-bottom:1px solid rgba(24,64,118,.17); }
    .about-stat { min-height:280px; padding:40px max(28px,4vw); border-right:1px solid rgba(24,64,118,.17); display:flex; flex-direction:column; justify-content:space-between; }
    .about-stat:last-child { border-right:0; }
    .about-stat strong { font-size:clamp(58px,7vw,116px); line-height:.85; letter-spacing:-.065em; font-weight:600; }
    .about-stat span { color:#707070; font:400 12px/1.4 "Roboto Mono",monospace; text-transform:uppercase; }
    .about-system { padding:clamp(120px,14vw,250px) max(80px,5vw); }
    .about-system__head { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px; margin-bottom:90px; }
    .about-system__head p { grid-column:1/4; margin:10px 0 0; color:#173db8; font:400 12px/1.4 "Roboto Mono",monospace; text-transform:uppercase; }
    .about-system__head h2 { grid-column:4/13; margin:0; font-size:clamp(54px,7vw,124px); line-height:.88; letter-spacing:-.06em; text-transform:uppercase; }
    .about-method { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(24,64,118,.17); }
    .about-method article { min-height:420px; padding:28px 28px 36px 0; border-right:1px solid rgba(24,64,118,.17); display:flex; flex-direction:column; }
    .about-method article+article { padding-left:28px; }
    .about-method article:last-child { border-right:0; }
    .about-method small { color:#173db8; font:400 12px/1 "Roboto Mono",monospace; }
    .about-method h3 { margin:auto 0 20px; font-size:clamp(28px,2.2vw,42px); line-height:1; letter-spacing:-.04em; }
    .about-method p { margin:0; color:#707070; font:400 14px/1.5 "Roboto Mono",monospace; }
    .about-principles { padding:clamp(110px,13vw,220px) max(80px,5vw); color:#fbfdff; background:#050914; }
    .about-principles h2 { max-width:1200px; margin:0 0 100px; font-size:clamp(52px,7vw,126px); line-height:.86; letter-spacing:-.06em; text-transform:uppercase; }
    .about-principle { display:grid; grid-template-columns:80px 1fr 1fr; gap:32px; padding:34px 0; border-top:1px solid rgba(220,230,248,.14); }
    .about-principle span { color:#79a6f4; font:400 12px/1.4 "Roboto Mono",monospace; }
    .about-principle h3 { margin:0; font-size:clamp(26px,2.5vw,46px); line-height:1; letter-spacing:-.04em; }
    .about-principle p { max-width:560px; margin:0; color:#98a1b1; font:400 14px/1.55 "Roboto Mono",monospace; }
    .about-reveal { opacity:0; transform:translateY(38px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
    .about-reveal.is-visible { opacity:1; transform:none; }
    @media (max-width:900px) {
      .about-hero { padding:110px 24px 42px; gap:18px; }
      .about-hero__mark { width:82vw; right:-22vw; top:39%; opacity:.52; }
      .about-hero__eyebrow,.about-hero h1,.about-hero__lead { grid-column:1/-1; }
      .about-hero h1 { font-size:clamp(54px,17vw,92px); }
      .about-hero__lead { margin-top:28px; }
      .about-manifest-page,.about-system,.about-principles { padding-inline:24px; }
      .about-manifest-page__tag,.about-manifest-page h2,.about-system__head p,.about-system__head h2 { grid-column:1/-1; }
      .about-stats,.about-method { grid-template-columns:1fr; }
      .about-stat,.about-method article { min-height:220px; border-right:0; border-bottom:1px solid rgba(24,64,118,.17); }
      .about-method article+article { padding-left:0; }
      .about-principle { grid-template-columns:42px 1fr; }
      .about-principle p { grid-column:2; }
    }

/* Services page */
    body.services-page {
      margin: 0;
      color: #eae8e4;
      background: #0c0d0e;
      font-family: var(--font-sans);
      overflow-x: hidden;
    }

    body.services-page::after {
      content: "";
      position: fixed;
      z-index: 9999;
      inset: 0;
      pointer-events: none;
      opacity: .045;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      mix-blend-mode: screen;
    }

    .services-page .site-header {
      color: #eae8e4;
      background: rgba(12,13,14,.72);
      border-bottom: 1px solid rgba(234,232,228,.08);
      backdrop-filter: blur(18px);
    }

    .services-page .contact {
      margin-top: 0;
    }

    .services-manifest {
      min-height: 100vh;
      display: grid;
      align-content: center;
      gap: clamp(40px, 6vw, 84px);
      padding: 120px clamp(22px, 10vw, 160px) 80px;
    }

    .services-kicker {
      margin: 0;
      color: #b9975b;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .services-page-title {
      margin: 0;
      font-size: clamp(76px, 14vw, 228px);
      font-weight: 800;
      line-height: .75;
      letter-spacing: -.09em;
      text-transform: uppercase;
    }

    .manifest-copy {
      max-width: 1060px;
      margin: 0;
      font-size: clamp(28px, 4.2vw, 76px);
      font-weight: 500;
      line-height: .98;
      letter-spacing: -.055em;
    }

    .manifest-line {
      display: block;
      color: rgba(234,232,228,.22);
      transition: color .45s linear, text-shadow .45s linear;
    }

    .manifest-line.is-lit {
      color: #eae8e4;
      text-shadow: 0 0 34px rgba(185,151,91,.12);
    }

    .service-architect {
      display: grid;
      grid-template-columns: minmax(280px, .38fr) minmax(0, 1fr);
      gap: clamp(40px, 7vw, 110px);
      padding: clamp(88px, 10vw, 150px) clamp(22px, 10vw, 160px);
      border-top: 1px solid rgba(234,232,228,.08);
    }

    .service-index {
      position: sticky;
      top: 120px;
      align-self: start;
      display: grid;
      gap: 18px;
    }

    .service-index__item {
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 18px;
      align-items: center;
      color: rgba(234,232,228,.28);
      font-size: clamp(26px, 3vw, 48px);
      font-weight: 700;
      line-height: .9;
      letter-spacing: -.05em;
      text-transform: uppercase;
      transition: color .55s var(--ease-aww), transform .55s var(--ease-aww);
    }

    .service-index__item span {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .06em;
    }

    .service-index__item.is-active {
      color: #b9975b;
      transform: scale(1.06) translateX(12px);
    }

    .service-blueprints {
      display: grid;
      gap: 28px;
    }

    .service-blueprint {
      min-height: 70vh;
      display: grid;
      align-content: center;
      gap: 34px;
      padding: clamp(28px, 4vw, 56px);
      border: 1px solid rgba(234,232,228,.12);
      background:
        linear-gradient(rgba(234,232,228,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(234,232,228,.035) 1px, transparent 1px),
        rgba(255,255,255,.018);
      background-size: 34px 34px;
      transition: border-color .55s var(--ease-aww), transform .55s var(--ease-aww), background-color .55s var(--ease-aww);
    }

    .service-blueprint.is-active {
      border-color: rgba(185,151,91,.58);
      background-color: rgba(185,151,91,.035);
      transform: translateX(-10px);
    }

    .service-blueprint h2 {
      max-width: 760px;
      margin: 0;
      font-size: clamp(44px, 6vw, 112px);
      font-weight: 800;
      line-height: .84;
      letter-spacing: -.075em;
      text-transform: uppercase;
    }

    .service-detail-link {
      display: inline-flex;
      width: max-content;
      align-items: center;
      gap: 18px;
      margin-top: 34px;
      padding: 13px 17px;
      border: 1px solid rgba(234,232,228,.28);
      color: #eae8e4;
      font: 500 12px/1 var(--font-mono);
      letter-spacing: .04em;
      text-transform: uppercase;
      transition: color .35s var(--ease-aww), background-color .35s var(--ease-aww), border-color .35s var(--ease-aww);
    }

    .service-detail-link:hover { color: #0c0d0e; border-color: #eae8e4; background: #eae8e4; }

    .blueprint-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .blueprint-card {
      min-height: 180px;
      padding: 22px;
      border: 1px solid rgba(234,232,228,.1);
      background: rgba(12,13,14,.72);
    }

    .blueprint-card strong {
      display: block;
      margin-bottom: 18px;
      color: #b9975b;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .blueprint-card ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: rgba(234,232,228,.72);
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.45;
    }

    .service-index__item:not(.is-active) {
      color: #525252;
    }

    .blueprint-grid {
      position: relative;
      gap: 0;
      border-top: 1px solid rgba(255,255,255,.05);
      border-left: 1px solid rgba(255,255,255,.05);
    }

    .service-blueprint.is-active .blueprint-grid::before {
      content: "[ ENGINE: ACTIVE ]";
      position: absolute;
      right: 0;
      top: -32px;
      color: #0066FF;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .blueprint-card {
      min-height: 188px;
      border: 0;
      border-right: 1px solid rgba(255,255,255,.05);
      border-bottom: 1px solid rgba(255,255,255,.05);
      background: rgba(255,255,255,.018);
    }

    .blueprint-card strong {
      color: #0066FF;
    }

    .blueprint-card li {
      width: 100%;
      height: 4px;
      overflow: hidden;
      border-radius: 999px;
      color: transparent;
      background: rgba(255,255,255,.05);
      font-size: 0;
      line-height: 0;
    }

    .blueprint-card li:nth-child(1) { width: 75%; }
    .blueprint-card li:nth-child(2) { width: 50%; }
    .blueprint-card li:nth-child(3) { width: 100%; }
    .blueprint-card li:nth-child(4) { width: 62%; }

    .tech-stack {
      position: relative;
      padding: clamp(90px, 12vw, 180px) clamp(22px, 10vw, 160px);
      overflow: hidden;
      border-top: 1px solid rgba(234,232,228,.08);
    }

    .tech-stack::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: var(--tech-grid-opacity, 0);
      pointer-events: none;
      background:
        linear-gradient(rgba(185,151,91,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(185,151,91,.22) 1px, transparent 1px);
      background-size: 42px 42px;
      transition: opacity .45s var(--ease-aww);
    }

    .tech-stack h2 {
      position: relative;
      max-width: 920px;
      margin: 0 0 clamp(42px, 6vw, 84px);
      font-size: clamp(48px, 7vw, 128px);
      font-weight: 800;
      line-height: .86;
      letter-spacing: -.075em;
      text-transform: uppercase;
    }

    .tech-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      perspective: 900px;
    }

    .tech-card {
      min-height: 170px;
      display: grid;
      align-content: space-between;
      padding: 22px;
      border: 1px solid rgba(234,232,228,.1);
      background: rgba(255,255,255,.025);
      transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
      transition: border-color .45s var(--ease-aww), transform .22s ease, background .45s var(--ease-aww);
    }

    .tech-card:hover {
      border-color: rgba(185,151,91,.72);
      background: rgba(185,151,91,.07);
    }

    .tech-card span {
      font-family: var(--font-mono);
      font-size: 12px;
      color: rgba(234,232,228,.42);
    }

    .tech-card strong {
      font-size: clamp(24px, 2vw, 34px);
      line-height: 1;
      letter-spacing: -.04em;
    }

    .services-final {
      min-height: 58vh;
      display: grid;
      align-content: center;
      gap: 28px;
      padding: clamp(80px, 10vw, 150px) clamp(22px, 10vw, 160px);
      color: #fff;
      background: radial-gradient(circle at 50% 0%, #163f8d 0%, #071326 48%, #050812 100%);
    }

    .services-final h2 {
      max-width: 980px;
      margin: 0;
      font-size: clamp(48px, 7vw, 128px);
      font-weight: 800;
      line-height: .86;
      letter-spacing: -.075em;
      text-transform: uppercase;
    }

    @media (max-width: 900px) {
      .services-manifest,
      .service-architect,
      .tech-stack,
      .services-final {
        padding-inline: 18px;
      }

      .service-architect {
        grid-template-columns: 1fr;
      }

      .service-index {
        position: static;
      }

      .blueprint-grid,
      .tech-grid {
        grid-template-columns: 1fr;
      }
    }

/* Projects page */
    body.projects-page {
      margin: 0;
      color: #08090b;
      background: #fff;
      font-family: var(--font-sans);
      overflow-x: hidden;
    }

    body.projects-page::after {
      content: "";
      position: fixed;
      z-index: 9999;
      inset: 0;
      pointer-events: none;
      opacity: .03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }

    .archive-shell {
      min-height: 100vh;
      padding: clamp(118px, 9vw, 158px) clamp(20px, 7vw, 132px) 0;
    }

    .archive-top {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: start;
      align-items: end;
      margin-bottom: clamp(38px, 5vw, 72px);
    }

    .archive-title {
      margin: 0;
      max-width: 1040px;
      font-size: clamp(58px, 7vw, 126px);
      font-weight: 600;
      line-height: .86;
      letter-spacing: -.065em;
      text-transform: uppercase;
    }

    .archive-counter {
      margin: 8px 0 0;
      color: rgba(8,9,11,.46);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .archive-top__meta {
      width: min(360px, 28vw);
      display: grid;
      gap: 24px;
      justify-items: end;
      text-align: right;
    }

    .archive-summary {
      margin: 0;
      color: rgba(8,9,11,.62);
      font: 400 13px/1.5 var(--font-mono);
    }

    .projects-page .site-header {
      color: #111215;
      background: rgba(255,255,255,.78);
      border-bottom: 1px solid rgba(17,18,21,.08);
      backdrop-filter: blur(18px);
    }

    .projects-page .main-nav a,
    .projects-page .header-actions > a:first-child {
      color: #111215;
    }

    .projects-page .contact {
      margin-top: 0;
    }

    .archive-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: clamp(22px, 3vw, 42px);
    }

    .archive-filter {
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid rgba(8,9,11,.16);
      border-radius: 0;
      color: #08090b;
      background: #fff;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color .55s var(--ease-aww), background .55s var(--ease-aww), border-color .55s var(--ease-aww), transform .55s var(--ease-aww);
    }

    .archive-filter:hover,
    .archive-filter.is-active {
      color: #fff;
      border-color: #0d1b3e;
      background: #0d1b3e;
      transform: translateY(-2px);
    }

    .archive-list {
      display: grid;
      min-height: 70vh;
      border-top: 1px solid rgba(8,9,11,.1);
    }

    .archive-row {
      position: relative;
      display: grid;
      grid-template-columns: 60px minmax(0, 1fr) minmax(150px, 210px);
      gap: clamp(16px, 3vw, 46px);
      align-items: center;
      min-height: clamp(158px, 18vh, 220px);
      border-bottom: 1px solid rgba(8,9,11,.1);
      color: #08090b;
      cursor: pointer;
      transition: color .55s var(--ease-aww), opacity .55s var(--ease-aww), background-color .55s var(--ease-aww);
    }

    .archive-row.is-filtered {
      min-height: 0;
      height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      border-bottom-color: transparent;
    }

    .archive-list:has(.archive-row:hover) .archive-row:not(:hover):not(.is-filtered) {
      opacity: .44;
    }

    .archive-row:hover {
      z-index: 2;
      color: #173db8;
      background: rgba(2,110,237,.025);
    }

    .archive-row__num,
    .archive-row__meta {
      color: rgba(8,9,11,.44);
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.35;
      letter-spacing: .06em;
      text-transform: uppercase;
      transition: color .65s var(--ease-aww), transform .65s var(--ease-aww);
    }

    .archive-row:hover .archive-row__meta {
      color: #b9975b;
      transform: translateX(-8px);
    }

    .archive-row__title {
      margin: 0;
      max-width: 100%;
      font-size: clamp(44px, 5.5vw, 96px);
      font-weight: 600;
      line-height: .9;
      letter-spacing: -.065em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: color .55s var(--ease-aww);
    }

    .archive-row:hover .archive-row__title {
      color: #173db8;
    }

    .archive-preview {
      position: fixed;
      z-index: 90;
      left: 0;
      top: 0;
      width: min(460px, 33vw);
      aspect-ratio: 1.53;
      overflow: hidden;
      border: 1px solid rgba(2,110,237,.16);
      border-radius: 4px;
      opacity: 0;
      pointer-events: none;
      background: #eaf0fb;
      box-shadow: 0 36px 90px rgba(13,27,62,.14);
      transform: translate3d(-50%, -50%, 0) scale(.7);
      transition: opacity .75s var(--ease-aww), width .85s var(--ease-aww), height .85s var(--ease-aww), border-radius .85s var(--ease-aww);
      will-change: transform, opacity;
    }

    .archive-preview.is-visible {
      opacity: 1;
    }

    .archive-preview.is-expanding {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
      opacity: 1;
      transition-duration: .78s;
    }

    .archive-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.06);
      transition: opacity .8s var(--ease-aww), transform 1.2s var(--ease-aww);
    }

    .archive-preview.is-visible img {
      transform: scale(1);
    }

    .archive-cta {
      min-height: 58vh;
      display: grid;
      align-content: center;
      gap: 28px;
      margin: clamp(72px, 10vw, 150px) calc(clamp(20px, 10vw, 160px) * -1) 0;
      padding: clamp(86px, 12vw, 170px) clamp(20px, 10vw, 160px);
      color: #fff;
      background: linear-gradient(180deg, #fff 0%, #c9d8f4 16%, #4778d6 42%, #071326 78%, #050812 100%);
    }

    .archive-cta h2 {
      max-width: 1060px;
      margin: 0;
      font-size: clamp(48px, 7vw, 128px);
      font-weight: 800;
      line-height: .86;
      letter-spacing: -.075em;
      text-transform: uppercase;
    }

    .archive-cta a {
      width: max-content;
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: .06em;
      text-transform: uppercase;
      opacity: .8;
    }

    @media (max-width: 900px) {
      .archive-shell {
        padding: 86px 18px 0;
      }

      .archive-top {
        grid-template-columns: 1fr;
      }

      .archive-top__meta {
        width: 100%;
        justify-items: start;
        text-align: left;
      }

      .archive-row {
        grid-template-columns: 42px 1fr;
        min-height: 136px;
      }

      .archive-row__meta {
        grid-column: 2;
      }

      .archive-row__title {
        font-size: clamp(36px, 12vw, 72px);
        white-space: normal;
      }

      .archive-preview {
        display: none;
      }

      .archive-cta {
        margin-inline: -18px;
        padding-inline: 18px;
      }
    }

/* Homepage sections (index.html revision) */
    :where(html.home-page) .section,
    :where(html.home-page) .services,
    :where(html.home-page) .cases-showcase {
      padding-left: var(--grid-margin) !important;
      padding-right: var(--grid-margin) !important;
    }

    
    :where(html.home-page) .services-inner,
    :where(html.home-page) .cases-showcase-inner,
    :where(html.home-page) .calculator-panel {
      width: min(var(--grid-max), calc(100vw - var(--grid-margin) * 2)) !important;
      max-width: none !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    

    

    

    
    

    

    

    

    

    

    
    :where(html.home-page) .contact-intro nav a,
    :where(html.home-page) .legal a,
    :where(html.home-page) .email {
      position: relative;
    }

    
    :where(html.home-page) .contact-intro nav a::after,
    :where(html.home-page) .legal a::after,
    :where(html.home-page) .email::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .72s var(--ease-aww);
    }

    
    :where(html.home-page) .contact-intro nav a:hover::after,
    :where(html.home-page) .legal a:hover::after,
    :where(html.home-page) .email:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    

    :where(html.home-page) .section,
    :where(html.home-page) .services,
    :where(html.home-page) .cases-showcase,
    :where(html.home-page) .steps,
    :where(html.home-page) .contact {
      --reveal-y: 36px;
    }

    

    :where(html.home-page) .reveal-target {
      opacity: 0;
      transform: translate3d(0, var(--reveal-y), 0);
      filter: blur(10px);
      transition: opacity .82s var(--ease-aww), transform .82s var(--ease-aww), filter .82s var(--ease-aww);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform, filter;
    }

    :where(html.home-page) .reveal-target.is-revealed {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0);
    }

    :where(html.home-page) .cases-showcase {
      position: relative;
      height: auto;
      padding-top: clamp(92px, 10vw, 154px);
      padding-bottom: clamp(100px, 12vw, 170px);
      background: #fff;
      isolation: isolate;
    }

    :where(html.home-page) .services {
      background: #fff !important;
    }

    :where(html.home-page) .bento-grid { perspective: 1200px; }

    :where(html.home-page) .service-card {
      transform: rotateX(var(--service-rx, 0deg)) rotateY(var(--service-ry, 0deg)) translateY(var(--service-y, 0px)) !important;
      transform-style: preserve-3d;
      transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease !important;
      will-change: transform, opacity;
    }

    :where(html.home-page) .service-card::before {
      display: block;
      opacity: 0;
      background: radial-gradient(circle at var(--service-mx, 50%) var(--service-my, 50%), rgba(255,255,255,.38), transparent 34%);
      transition: opacity .22s ease;
    }

    :where(html.home-page) .bento-grid:hover .service-card { opacity: .58 !important; }

    :where(html.home-page) .bento-grid .service-card:hover {
      --service-y: -4px;
      opacity: 1 !important;
      box-shadow: 0 24px 70px rgba(8,43,92,.14) !important;
    }

    :where(html.home-page) .bento-grid .service-card:hover::before { opacity: 1; }

    :where(html.home-page) .services {
      color: #111111;
      background: #FFFFFF !important;
    }

    :where(html.home-page) .services .eyebrow {
      color: rgba(17,17,17,.52) !important;
    }

    :where(html.home-page) .services .dot::before {
      color: #087cf0;
    }

    :where(html.home-page) .services .bento-grid {
      gap: 32px !important;
      margin-top: clamp(34px, 5vw, 76px);
      border: 0;
      background: #FFFFFF;
    }

    :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
      min-height: clamp(390px, 42vw, 560px) !important;
      border: 1px solid rgba(0,0,0,.08) !important;
      border-radius: 20px !important;
      background: #FFFFFF !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transition: all .3s var(--ease-aww) !important;
    }

    :where(html.home-page) .services .service-card::before {
      display: block !important;
      z-index: 1;
      opacity: 0;
      background:
        radial-gradient(circle 100px at var(--service-mx, 50%) var(--service-my, 50%), rgba(8,124,240,.24), rgba(255,255,255,.10) 42%, transparent 72%),
        radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px) !important;
      background-size: auto, 16px 16px;
      mix-blend-mode: screen;
      transition: opacity .3s var(--ease-aww) !important;
    }

    :where(html.home-page) .services .service-card::after {
      content: "";
      position: absolute;
      z-index: 3;
      right: 24px;
      top: 24px;
      width: 26px;
      height: 26px;
      border: 1px solid rgba(8,124,240,.82);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      background:
        radial-gradient(circle, #087cf0 0 3px, transparent 4px),
        linear-gradient(90deg, transparent 0 11px, rgba(8,124,240,.78) 11px 12px, transparent 12px 100%),
        linear-gradient(0deg, transparent 0 11px, rgba(8,124,240,.78) 11px 12px, transparent 12px 100%);
      box-shadow: 0 0 24px rgba(8,124,240,.42);
      transition: opacity .3s var(--ease-aww), transform .3s var(--ease-aww);
      transform: scale(.72);
    }

    :where(html.home-page) .services .bento-grid:hover .service-card {
      opacity: 1 !important;
    }

    :where(html.home-page) .services .service-card:hover {
      --service-y: 0px !important;
      color: #FFFFFF;
      background: #0D0D0D !important;
      transform: translate3d(0, 0, 0) !important;
    }

    :where(html.home-page) .services .service-card:hover::before,
    :where(html.home-page) .services .service-card:hover::after {
      opacity: 1 !important;
      transform: scale(1);
    }

    :where(html.home-page) .services .service-content {
      transform: none !important;
      transition: transform .3s var(--ease-aww);
    }

    :where(html.home-page) .services .service-card:hover .service-content {
      transform: translate3d(0, -4px, 0) !important;
    }

    :where(html.home-page) .services .service-title {
      color: #111111 !important;
      transition: color .3s var(--ease-aww), transform .3s var(--ease-aww);
    }

    :where(html.home-page) .services .service-card:hover .service-title {
      color: #FFFFFF !important;
    }

    :where(html.home-page) .services .service-num {
      color: rgba(17,17,17,.42) !important;
      transition: color .3s var(--ease-aww);
    }

    :where(html.home-page) .services .service-card:hover .service-num {
      color: rgba(255,255,255,.52) !important;
    }

    :where(html.home-page) .services .service-text {
      color: rgba(17,17,17,.68) !important;
      transition: color .3s var(--ease-aww);
    }

    :where(html.home-page) .services .service-card:hover .service-text {
      color: rgba(255,255,255,.68) !important;
    }

    :where(html.home-page) .services .service-visual {
      opacity: .96;
      filter: none;
      transition: opacity .3s var(--ease-aww), transform .3s var(--ease-aww) !important;
    }

    :where(html.home-page) .services .service-card:hover .service-visual {
      opacity: .72;
      filter: invert(1) grayscale(1);
    }

    :where(html.home-page) .service-visual {
      pointer-events: none !important;
      transform: translateZ(18px) translate3d(var(--service-art-x, 0px), var(--service-art-y, 0px), 0) scale(var(--service-art-scale, 1)) !important;
      transform-origin: center;
      transition: transform .22s ease !important;
      will-change: transform;
    }

    :where(html.home-page) .cases-showcase-inner {
      position: relative;
      z-index: 1;
      width: min(1462px, 100%);
      margin: 0 auto;
    }

    :where(html.home-page) .cases-showcase-head {
      display: grid;
      grid-template-columns: minmax(220px, .34fr) 1fr;
      gap: clamp(34px, 6vw, 96px);
      align-items: start;
      margin-bottom: clamp(56px, 8vw, 116px);
    }

    :where(html.home-page) .cases-showcase-title {
      max-width: 980px;
      margin: 0;
      font-size: 64px;
      font-weight: 400;
      line-height: .95;
      letter-spacing: -.05em;
    }

    :where(html.home-page) .cases-list {
      position: relative;
      display: grid;
      border-top: 1px solid rgba(32, 32, 32, .16);
      perspective: 1200px;
    }

    :where(html.home-page) .case-row {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(220px, .46fr) 90px;
      gap: clamp(24px, 4vw, 68px);
      align-items: center;
      min-height: clamp(132px, 14vw, 214px);
      padding: clamp(28px, 4vw, 52px) 0;
      border-bottom: 1px solid rgba(32, 32, 32, .16);
      cursor: pointer;
      transform: translate3d(var(--row-x, 0px), 0, 0) rotateX(var(--row-rx, 0deg));
      transform-style: preserve-3d;
      transition: padding-left .28s var(--ease-snap), color .24s ease, opacity .24s ease, transform .24s var(--ease-snap);
      will-change: transform, opacity;
    }

    :where(html.home-page) .case-row::after {
      content: "";
      position: absolute;
      inset: 1px 0;
      z-index: -1;
      opacity: 0;
      background: radial-gradient(circle at var(--row-mx, 50%) 50%, rgba(8,124,240,.11), transparent 38%);
      transition: opacity .28s var(--ease-snap);
    }

    :where(html.home-page) .cases-list:hover .case-row { opacity: .38; }

    :where(html.home-page) .cases-list .case-row:hover {
      opacity: 1;
      color: var(--color-blue);
      padding-left: 22px;
    }

    :where(html.home-page) .cases-list .case-row:hover::after { opacity: 1; }

    :where(html.home-page) .case-row::before {
      content: "";
      position: absolute;
      left: 0;
      top: -1px;
      width: 0;
      height: 1px;
      background: var(--color-blue);
      box-shadow: 0 0 18px rgba(8,124,240,.28);
      transition: width .34s var(--ease-snap);
    }

    :where(html.home-page) .case-row:hover::before { width: 100%; }

    :where(html.home-page) .case-row-title {
      margin: 0;
      font-size: 40px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -.04em;
    }

    :where(html.home-page) .case-row-meta {
      margin: 0;
      color: #777;
      font-size: 20px;
      font-weight: 400;
      line-height: 1.28;
      letter-spacing: -.025em;
      transition: color .24s ease;
    }

    :where(html.home-page) .case-row:hover .case-row-meta { color: rgba(8, 124, 240, .76); }

    :where(html.home-page) .case-row-year {
      justify-self: end;
      color: #a0a0a0;
      font-size: 15px;
      line-height: 1;
      transition: color .24s ease, transform .24s ease;
    }

    :where(html.home-page) .case-row:hover .case-row-year {
      color: var(--color-blue);
      transform: translateX(-8px);
    }

    :where(html.home-page) .case-row-title,
    :where(html.home-page) .case-row-meta,
    :where(html.home-page) .case-row-year {
      transition-duration: .58s;
      transition-timing-function: var(--ease-aww);
    }

    :where(html.home-page) .case-row:hover .case-row-title {
      transform: translate3d(var(--row-x, 0px), 0, 0);
    }

    :where(html.home-page) .case-row:hover .case-row-meta {
      transform: translate3d(calc(var(--row-x, 0px) * .45), 0, 0);
    }

    :where(html.home-page) .case-hover-preview {
      position: fixed;
      z-index: 80;
      left: 0;
      top: 0;
      width: min(430px, 32vw);
      aspect-ratio: 1.45;
      overflow: hidden;
      border-radius: 20px;
      opacity: 0;
      pointer-events: none;
      background: #f3f3f3;
      box-shadow: 0 30px 90px rgba(20, 32, 52, .18);
      transform: translate3d(-50%, -50%, 0) scale(.96) rotate(var(--preview-rotate, 0deg));
      transition: opacity .92s var(--ease-aww), transform 1.05s var(--ease-aww), filter 1.05s var(--ease-aww);
      will-change: transform, opacity;
      filter: saturate(.86) brightness(1.05);
    }

    :where(html.home-page) .case-hover-preview.is-active {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1) rotate(var(--preview-rotate, 0deg));
      filter: saturate(1) brightness(1);
    }

    :where(html.home-page) .case-hover-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.08) translate3d(var(--preview-img-x, 0px), var(--preview-img-y, 0px), 0);
      transition: transform 1.15s var(--ease-aww);
      will-change: transform;
    }

    :where(html.home-page) .case-hover-preview::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, .42));
      pointer-events: none;
    }

    :where(html.home-page) .case-transition-canvas {
      position: fixed;
      z-index: 9999;
      left: var(--case-transition-left, 50vw);
      top: var(--case-transition-top, 50vh);
      width: var(--case-transition-width, 430px);
      height: var(--case-transition-height, 300px);
      overflow: hidden;
      border-radius: var(--case-transition-radius, 20px);
      background: #05070b;
      pointer-events: none;
      transform: translate3d(-50%, -50%, 0);
      transition:
        left .88s var(--ease-aww),
        top .88s var(--ease-aww),
        width .88s var(--ease-aww),
        height .88s var(--ease-aww),
        border-radius .88s var(--ease-aww),
        filter .88s var(--ease-aww),
        transform .88s var(--ease-aww);
    }

    :where(html.home-page) .case-transition-canvas img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: contrast(1.06) saturate(.96) brightness(.98);
      transform: scale(1);
      transition: transform 1.45s cubic-bezier(.16, 1, .3, 1), filter 1.45s cubic-bezier(.16, 1, .3, 1);
      will-change: transform, filter;
    }

    :where(html.home-page) .case-transition-canvas.is-expanded {
      left: 50vw;
      top: 50vh;
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

    :where(html.home-page) .case-transition-canvas.is-expanded img {
      transform: scale(1.045);
    }

    :where(html.home-page) .case-transition-canvas.is-cinematic img {
      filter: none;
      transform: scale(1.16);
    }

    :where(html.home-page) body.is-case-transitioning {
      cursor: wait;
    }

    :where(html.home-page) .case-preview-caption {
      position: absolute;
      z-index: 2;
      left: 18px;
      right: 18px;
      bottom: 16px;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: #fff;
      font-size: 14px;
      line-height: 1;
    }

    :where(html.home-page) .steps-light-fader {
      position: absolute;
      z-index: 0;
      inset: 0;
      display: none;
      pointer-events: none;
      opacity: var(--steps-light, 1);
      background:
        radial-gradient(circle at 48% 43%, rgba(255,255,255,1) 0%, rgba(248,252,255,.98) 31%, rgba(223,237,255,.82) 55%, rgba(190,219,255,.54) 73%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, #ffffff 0%, #eef6ff 50%, #ffffff 100%);
      transition: opacity .18s linear;
    }

    :where(html.home-page) .steps-light-fader::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: calc(1 - var(--steps-light, 1));
      background:
        radial-gradient(circle at 50% 44%, rgba(8,124,240,.16), transparent 38%),
        radial-gradient(circle at 52% 55%, rgba(255,199,92,.08), transparent 42%);
      mix-blend-mode: screen;
    }

    :where(html.home-page) .steps {
      position: relative;
      z-index: 8;
    }

    :where(html.home-page) .steps-particles,
    :where(html.home-page) .steps-light-fader,
    :where(html.home-page) .steps-bottom-wave {
      display: none !important;
    }

    :where(html.home-page) .step-copy span {
      color: var(--steps-kicker-color, rgba(255,255,255,.56)) !important;
      transition: color .12s linear;
    }

    :where(html.home-page) .step h3 {
      color: var(--steps-heading-color, #f6f0e7) !important;
      transition: color .12s linear;
    }

    :where(html.home-page) .step p {
      color: var(--steps-body-color, rgba(255,255,255,.62)) !important;
      transition: color .18s linear;
    }

    :where(html.home-page) .step-visual {
      --icon-color: #087cf0;
      --icon-glow: rgba(8,124,240,.42);
    }

    :where(html.home-page) .step-icon {
      position: relative;
      width: 218px;
      height: 218px;
      color: var(--icon-color);
      filter: drop-shadow(0 0 22px var(--icon-glow));
      transform: translateZ(0);
    }

    :where(html.home-page) .step-icon::before,
    :where(html.home-page) .step-icon::after {
      content: "";
      position: absolute;
      inset: 9%;
      border-radius: 50%;
      pointer-events: none;
    }

    :where(html.home-page) .step-icon::before {
      border: 1px solid rgba(8,124,240,.24);
      background:
        radial-gradient(circle at 50% 50%, rgba(8,124,240,.10), transparent 48%),
        repeating-conic-gradient(from 0deg, rgba(8,124,240,.16) 0 4deg, transparent 4deg 18deg);
      mask-image: radial-gradient(circle, transparent 0 52%, #000 53% 100%);
      animation: axiosIconHalo 10s linear infinite;
    }

    :where(html.home-page) .step-icon::after {
      inset: 22%;
      background: radial-gradient(circle, rgba(8,124,240,.18), transparent 62%);
      animation: axiosIconAura 4.8s var(--ease-soft, ease) infinite;
    }

    :where(html.home-page) .step-icon svg {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    :where(html.home-page) .step-icon path,
    :where(html.home-page) .step-icon circle,
    :where(html.home-page) .step-icon rect,
    :where(html.home-page) .step-icon line,
    :where(html.home-page) .step-icon polyline {
      fill: none;
      stroke: currentColor;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    :where(html.home-page) .step-icon .solid { fill: #02050a; stroke: currentColor; }
    :where(html.home-page) .step-icon .thin { stroke-width: 5; opacity: .88; }
    :where(html.home-page) .step-icon .node { fill: #ffc75a; stroke: none; filter: drop-shadow(0 0 8px rgba(255,199,92,.55)); }
    :where(html.home-page) .step-icon .pulse { animation: axiosIconPulse 5.8s var(--ease-soft, ease) infinite; transform-origin: center; }
    :where(html.home-page) .step-icon .draw { stroke-dasharray: 420; stroke-dashoffset: 420; animation: axiosIconDraw 7.2s var(--ease-aww) infinite; }
    :where(html.home-page) .step-icon .float { animation: axiosIconFloat 7.4s ease-in-out infinite; transform-origin: center; }
    :where(html.home-page) .step-icon .scan { animation: axiosIconScan 6.8s var(--ease-aww) infinite; transform-origin: center; }
    :where(html.home-page) .step-icon .orbit { animation: axiosIconOrbit 12s linear infinite; transform-origin: 96px 96px; }
    :where(html.home-page) .step-icon .delay-a { animation-delay: .38s; }
    :where(html.home-page) .step-icon .delay-b { animation-delay: .76s; }

    @keyframes axiosIconDraw {
      0% { stroke-dashoffset: 420; opacity: .28; }
      30%, 72% { stroke-dashoffset: 0; opacity: 1; }
      100% { stroke-dashoffset: -420; opacity: .28; }
    }

    @keyframes axiosIconPulse {
      0%, 100% { transform: scale(1); opacity: .9; }
      50% { transform: scale(1.035); opacity: 1; }
    }

    @keyframes axiosIconFloat {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -7px, 0); }
    }

    @keyframes axiosIconScan {
      0%, 100% { transform: translate3d(-18px, -6px, 0); opacity: .25; }
      42%, 58% { transform: translate3d(18px, 8px, 0); opacity: 1; }
    }

    @keyframes axiosIconOrbit {
      to { transform: rotate(360deg); }
    }

    @keyframes axiosIconHalo {
      to { transform: rotate(360deg); }
    }

    @keyframes axiosIconAura {
      0%, 100% { opacity: .45; transform: scale(.94); }
      50% { opacity: .9; transform: scale(1.08); }
    }

    :where(html.home-page) .step-icon {
      --tm-ease: cubic-bezier(.77, 0, .175, 1);
    }

    :where(html.home-page) .step-icon svg {
      animation: tmSceneDrift 8.4s ease-in-out infinite;
    }

    :where(html.home-page) .step-icon path,
    :where(html.home-page) .step-icon circle,
    :where(html.home-page) .step-icon rect,
    :where(html.home-page) .step-icon line,
    :where(html.home-page) .step-icon polyline {
      stroke-dasharray: 420;
      stroke-dashoffset: 420;
      animation: tmLineTrace 5.8s var(--tm-ease) infinite;
    }

    :where(html.home-page) .step-icon .thin {
      stroke-dasharray: 34 18;
      stroke-dashoffset: 120;
      animation: tmDashOrbit 7.2s linear infinite;
    }

    :where(html.home-page) .step-icon .solid {
      fill: rgba(2,5,10,.78);
      stroke-dasharray: 520;
      stroke-dashoffset: 520;
      animation: tmBodyTrace 6.4s var(--tm-ease) infinite;
    }

    :where(html.home-page) .step-icon .pulse {
      animation: tmLineTrace 5.8s var(--tm-ease) infinite, tmPulseCore 3.8s ease-in-out infinite;
    }

    :where(html.home-page) .step-icon .float {
      animation: tmLineTrace 5.8s var(--tm-ease) infinite, tmFloatLayer 6s ease-in-out infinite;
    }

    :where(html.home-page) .step-icon .scan {
      stroke-dasharray: 80 140;
      animation: tmScanLine 3.8s var(--tm-ease) infinite;
    }

    :where(html.home-page) .step-icon .orbit {
      stroke-dasharray: 18 16;
      animation: tmDashOrbit 8s linear infinite;
    }

    :where(html.home-page) .step-icon .node {
      animation: tmNodeBlink 3.4s ease-in-out infinite;
    }

    :where(html.home-page) .step[data-step="02"] .step-icon path,
    :where(html.home-page) .step[data-step="02"] .step-icon circle,
    :where(html.home-page) .step[data-step="02"] .step-icon rect,
    :where(html.home-page) .step[data-step="02"] .step-icon line,
    :where(html.home-page) .step[data-step="02"] .step-icon polyline { animation-delay: .18s; }

    :where(html.home-page) .step[data-step="03"] .step-icon path,
    :where(html.home-page) .step[data-step="03"] .step-icon circle,
    :where(html.home-page) .step[data-step="03"] .step-icon rect,
    :where(html.home-page) .step[data-step="03"] .step-icon line,
    :where(html.home-page) .step[data-step="03"] .step-icon polyline { animation-delay: .34s; }

    :where(html.home-page) .step[data-step="04"] .step-icon path,
    :where(html.home-page) .step[data-step="04"] .step-icon circle,
    :where(html.home-page) .step[data-step="04"] .step-icon rect,
    :where(html.home-page) .step[data-step="04"] .step-icon line,
    :where(html.home-page) .step[data-step="04"] .step-icon polyline { animation-delay: .5s; }

    @keyframes tmLineTrace {
      0% { stroke-dashoffset: 420; opacity: .18; }
      18% { opacity: 1; }
      46%, 68% { stroke-dashoffset: 0; opacity: 1; }
      100% { stroke-dashoffset: -420; opacity: .18; }
    }

    @keyframes tmBodyTrace {
      0% { stroke-dashoffset: 520; fill-opacity: 0; }
      42%, 70% { stroke-dashoffset: 0; fill-opacity: .95; }
      100% { stroke-dashoffset: -520; fill-opacity: 0; }
    }

    @keyframes tmDashOrbit {
      to { stroke-dashoffset: -220; transform: rotate(360deg); }
    }

    @keyframes tmScanLine {
      0% { stroke-dashoffset: 220; opacity: .2; transform: translate3d(-14px, -6px, 0); }
      42%, 58% { opacity: 1; transform: translate3d(14px, 7px, 0); }
      100% { stroke-dashoffset: -220; opacity: .2; transform: translate3d(-14px, -6px, 0); }
    }

    @keyframes tmPulseCore {
      0%, 100% { transform: scale(.985); filter: drop-shadow(0 0 0 rgba(8,124,240,0)); }
      50% { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(8,124,240,.56)); }
    }

    @keyframes tmFloatLayer {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -8px, 0); }
    }

    @keyframes tmNodeBlink {
      0%, 100% { opacity: .28; transform: scale(.72); }
      45%, 58% { opacity: 1; transform: scale(1.15); }
    }

    @keyframes tmSceneDrift {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      50% { transform: translate3d(0, -4px, 0) rotate(.8deg); }
    }

    :where(html.home-page) .steps-label {
      position: absolute;
      z-index: 6;
      top: 58px;
      left: clamp(22px, 4vw, 56px);
      margin: 0;
      color: #087cf0;
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: 0;
    }

    :where(html.home-page) .step-cluster {
      grid-template-columns: 300px minmax(360px, 560px) !important;
      gap: 52px !important;
      align-items: center !important;
    }

    :where(html.home-page) .step-visual {
      width: 300px !important;
      height: 300px !important;
      border-radius: 8px !important;
      background: #1b1d23 !important;
      overflow: hidden !important;
      box-shadow: 0 22px 80px rgba(0, 0, 0, .52) !important;
    }

    :where(html.home-page) .step-icon {
      width: 100% !important;
      height: 100% !important;
      color: rgba(255, 255, 255, .46) !important;
      filter: none !important;
    }

    :where(html.home-page) .step-icon::before,
    :where(html.home-page) .step-icon::after {
      display: none !important;
    }

    :where(html.home-page) .step-icon svg {
      width: 100% !important;
      height: 100% !important;
      animation: tmSceneDrift 8.4s ease-in-out infinite;
    }

    :where(html.home-page) .step-icon canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    :where(html.home-page) .step-icon path,
    :where(html.home-page) .step-icon circle,
    :where(html.home-page) .step-icon rect,
    :where(html.home-page) .step-icon line,
    :where(html.home-page) .step-icon polyline {
      stroke: rgba(255, 255, 255, .42) !important;
      stroke-width: 1.35 !important;
      fill: none !important;
      filter: none !important;
    }

    :where(html.home-page) .step-icon .solid {
      fill: transparent !important;
      stroke: rgba(255, 255, 255, .36) !important;
    }

    :where(html.home-page) .step-icon .node {
      fill: #087cf0 !important;
      stroke: none !important;
      filter: drop-shadow(0 0 7px rgba(8,124,240,.72)) !important;
    }

    :where(html.home-page) .step-copy {
      position: relative;
      padding-left: 18px;
    }

    :where(html.home-page) .step-copy::before {
      top: 4px !important;
      left: 0 !important;
      width: 5px !important;
      height: 5px !important;
      border-radius: 1px !important;
      background: #087cf0 !important;
      box-shadow: 0 0 10px rgba(8,124,240,.78) !important;
      transform: none !important;
    }

    :where(html.home-page) .step-copy::after {
      display: none !important;
    }

    :where(html.home-page) .step-copy span {
      margin-bottom: 26px !important;
      color: #087cf0 !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }

    :where(html.home-page) .step h3 {
      margin-bottom: 26px !important;
      color: #f6f0e7 !important;
      font-size: 20px !important;
      font-weight: 400 !important;
      line-height: 1.1 !important;
      letter-spacing: -.02em !important;
      text-transform: uppercase;
    }

    :where(html.home-page) .step p {
      max-width: 430px !important;
      color: rgba(255, 255, 255, .48) !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      line-height: 1.7 !important;
      letter-spacing: 0 !important;
    }

    :where(html.home-page) .steps-bottom-progress {
      position: fixed !important;
      z-index: 12 !important;
      left: clamp(24px, 4vw, 56px) !important;
      right: clamp(24px, 4vw, 56px) !important;
      bottom: clamp(22px, 4vh, 42px) !important;
      display: grid !important;
      grid-template-columns: auto minmax(220px, 1fr) !important;
      align-items: center !important;
      gap: 28px !important;
      color: rgba(255,255,255,.44) !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }

    :where(html.home-page) body.is-steps-active .steps-bottom-progress {
      opacity: 1;
    }

    :where(html.home-page) .steps-progress-dots {
      position: relative;
      display: grid !important;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
      width: 100%;
      height: 34px;
    }

    :where(html.home-page) .steps-progress-dots::before,
    :where(html.home-page) .steps-progress-dots::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      transform: translateY(-50%);
    }

    :where(html.home-page) .steps-progress-dots::before {
      background: rgba(255,255,255,.18);
    }

    :where(html.home-page) .steps-progress-dots::after {
      right: auto;
      width: calc(var(--steps-progress, 0) * 100%);
      background: #087cf0;
      box-shadow: 0 0 12px rgba(8,124,240,.6);
    }

    :where(html.home-page) .steps-progress-dots i {
      position: relative;
      z-index: 1;
      justify-self: center;
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: #000;
      color: rgba(255,255,255,.42);
      font-style: normal;
      font-size: 10px;
      transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    :where(html.home-page) .steps-progress-dots i::before {
      content: attr(data-step);
    }

    :where(html.home-page) .steps-progress-dots i.active {
      color: #fff;
      border-color: #087cf0;
      background: #031324;
      box-shadow: 0 0 16px rgba(8,124,240,.62);
    }

    :where(html.home-page) .faq {
      background: #ffffff !important;
    }

    :where(html.home-page) .contact {
      overflow: hidden;
    }

    :where(html.home-page) .contact::after {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      opacity: .62;
      background:
        radial-gradient(circle at 22% 72%, rgba(8,124,240,.34) 0 2px, transparent 5px),
        radial-gradient(circle at 64% 34%, rgba(255,199,92,.28) 0 1px, transparent 5px),
        radial-gradient(circle at 78% 78%, rgba(8,124,240,.22) 0 1px, transparent 4px);
      background-size: 220px 180px, 260px 220px, 180px 240px;
      animation: axiosFooterParticles 12s linear infinite;
      mix-blend-mode: screen;
    }

    @keyframes axiosFooterParticles {
      to { background-position: 220px -180px, -260px 220px, 180px -240px; }
    }

    

    

    

    

    

    

    

    

    :where(html.home-page) .project figure {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      cursor: pointer;
    }

    :where(html.home-page) .pixel-reveal-canvas {
      position: absolute;
      z-index: 4;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: var(--radius-md);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: none;
    }

    :where(html.home-page) .project figure img {
      opacity: 1;
      visibility: visible;
      filter: none;
    }

    :where(html.home-page) .project figure.has-pixel-reveal img {
      opacity: 1 !important;
      visibility: visible !important;
      filter: none !important;
      animation: none !important;
      transition: none !important;
    }

    :where(html.home-page) .project figure.is-pixel-revealing img {
      opacity: 1 !important;
      visibility: visible !important;
      filter: none !important;
      animation: none !important;
      transition: none !important;
    }

    :where(html.home-page) .project figure.has-pixel-complete img {
      opacity: 1 !important;
      visibility: visible !important;
      filter: none !important;
      animation: none !important;
      transition: none !important;
    }

    :where(html.home-page) .project figure.has-pixel-reveal .pixel-reveal-canvas,
    :where(html.home-page) .project figure.is-pixel-revealing .pixel-reveal-canvas {
      opacity: 1;
      visibility: visible;
    }

    :where(html.home-page) .project figure.has-pixel-complete .pixel-reveal-canvas {
      opacity: 0;
      visibility: hidden;
    }

    :where(html.home-page) .project figure img {
      transition: none;
    }

    :where(html.home-page) .project figure::before,
    :where(html.home-page) .project figure::after {
      content: "";
      position: absolute;
      z-index: 3;
      inset: 0;
      border-radius: var(--radius-md);
      pointer-events: none;
      opacity: 0;
    }

    :where(html.home-page) .project figure::before {
      display: none;
    }

    :where(html.home-page) .project figure::after {
      display: none;
    }

    :where(html.home-page) .project.is-digitizing figure::before {
      animation: none;
    }

    :where(html.home-page) .project.is-digitizing figure::after {
      opacity: 0;
      animation: none;
    }

    :where(html.home-page) .project.is-digitizing figure img {
      animation: none;
    }

    :where(html.home-page) .project figure::after {
      display: block;
      z-index: 2;
      border-radius: inherit;
      opacity: .82;
      background:
        linear-gradient(90deg, rgba(255,255,255,.16), transparent 18%, transparent 82%, rgba(255,255,255,.16)),
        radial-gradient(circle at var(--case-x, 50%) var(--case-y, 50%), rgba(8,124,240,.12), transparent 28%);
      mix-blend-mode: screen;
    }

    :where(html.home-page) .project-view-cursor {
      position: fixed;
      z-index: 120;
      left: 0;
      top: 0;
      display: grid;
      place-items: center;
      width: 104px;
      height: 104px;
      border: 1px solid rgba(8,124,240,.54);
      border-radius: 50%;
      color: #087cf0;
      background: rgba(15,16,21,.18);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 34px rgba(8,124,240,.24);
      opacity: 0;
      pointer-events: none;
      transform: translate3d(-50%, -50%, 0) scale(.78);
      transition: opacity .32s var(--ease-aww), transform .32s var(--ease-aww);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
    }

    :where(html.home-page) .project-view-cursor.is-visible {
      opacity: 1;
      transform: translate3d(-50%, -50%, 0) scale(1);
    }

    @keyframes casePixelAssemble {
      0% {
        opacity: 1;
        background-size: 52px 52px, 52px 52px, auto;
        filter: contrast(1.7);
      }
      68% {
        opacity: .72;
        background-size: 18px 18px, 18px 18px, auto;
      }
      100% {
        opacity: 0;
        background-size: 4px 4px, 4px 4px, auto;
      }
    }

    @keyframes caseScanline {
      from { transform: translateY(-130%); }
      to { transform: translateY(520%); }
    }

    @keyframes caseImageDecode {
      0% { filter: none; transform: translate3d(0, var(--case-image-y), 0) scale(var(--case-image-scale)); }
      100% { filter: none; transform: translate3d(0, var(--case-image-y), 0) scale(var(--case-image-scale)); }
    }

    

    @keyframes heroCopyIn {
      from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
        filter: blur(8px);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }

    @keyframes uiRevealDown {
      from {
        opacity: 0;
        transform: translate3d(0, -18px, 0);
        filter: blur(8px);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
      }
    }

    @keyframes uiRevealUp {
      from {
        opacity: 0;
        transform: translate3d(-50%, 24px, 0);
        filter: blur(8px);
      }
      to {
        opacity: 1;
        transform: translate3d(-50%, 0, 0);
        filter: blur(0);
      }
    }

    :where(html.home-page) .button {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border: 0;
      color: #fff;
      background: #087cf0;
      box-shadow: 4px 8px 19px -3px rgba(2, 26, 64, .36);
      transition: color .42s cubic-bezier(.22,1,.36,1), transform .22s ease, box-shadow .22s ease;
    }

    :where(html.home-page) .button::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 100%;
      z-index: -1;
      border-radius: inherit;
      background: #fff;
      transition: width .42s cubic-bezier(.22,1,.36,1);
    }

    :where(html.home-page) .button:hover {
      color: #087cf0;
      transform: translateY(-2px);
      box-shadow: 4px 10px 24px -4px rgba(2, 26, 64, .42);
    }

    :where(html.home-page) .button:hover::before {
      width: 100%;
    }

    :where(html.home-page) .button:active {
      transform: translateY(1px);
      box-shadow: 2px 5px 14px -5px rgba(2, 26, 64, .38);
    }

    :where(html.home-page) .calculator-options button{
      position: relative;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(8,124,240,.18);
      background: #fff;
      box-shadow: 4px 8px 19px -12px rgba(2, 26, 64, .22);
      transition: color .42s var(--ease-aww), border-color .24s ease, transform .22s ease, box-shadow .22s ease;
    }

    :where(html.home-page) .calculator-options button::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 100%;
      z-index: -1;
      background: var(--color-blue);
      transform: none;
      transition: width .42s var(--ease-aww);
    }

    :where(html.home-page) .calculator-options button:hover{
      color: #087cf0;
      border-color: var(--color-blue);
      transform: translateY(-2px);
      box-shadow: 4px 10px 24px -10px rgba(2, 26, 64, .34);
    }

    :where(html.home-page) .calculator-options button:hover::before,
    :where(html.home-page) .calculator-options button.is-selected::before {
      width: 100%;
    }

    :where(html.home-page) .calculator-options button:hover::before {
      background: #fff;
    }

    :where(html.home-page) .calculator-options button.is-selected::before {
      background: var(--color-blue);
    }

    :where(html.home-page) .calculator-options button.is-selected {
      border-color: var(--color-blue);
      background: transparent;
      color: #fff;
    }

    :where(html.home-page) .calculator-options button,
    :where(html.home-page) .calculator-options button:hover,
    :where(html.home-page) .calculator-options button.is-selected {
      color: #2f2f2f !important;
      background: #fff !important;
      border: 1px solid transparent !important;
      box-shadow: none !important;
      transform: none !important;
      transition: border-color .2s ease !important;
    }

    :where(html.home-page) .calculator-options button::before {
      display: none !important;
    }

    :where(html.home-page) .calculator-options button:hover,
    :where(html.home-page) .calculator-options button.is-selected,
    :where(html.home-page) .calculator-options button:focus-visible {
      border-color: var(--color-blue) !important;
    }

    :where(html.home-page) .calculator { background: #f9f9f8 !important; }

    :where(html.home-page) .calculator-panel {
      width: 100% !important;
      min-height: 860px !important;
      border-radius: 0 !important;
      background: transparent !important;
    }

    :where(html.home-page) .calculator-heading {
      align-items: flex-start !important;
      text-align: left !important;
    }

    :where(html.home-page) .calculator-label {
      color: rgba(8,124,240,.82) !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .calculator-heading h2,
    :where(html.home-page) .calculator-question legend { color: #111215 !important; }

    :where(html.home-page) .calculator-options button,
    :where(html.home-page) .calculator-options button:hover,
    :where(html.home-page) .calculator-options button.is-selected {
      color: #111215 !important;
      border: 1px solid rgba(0,210,255,.15) !important;
      border-radius: 6px !important;
      background: rgba(255,255,255,.34) !important;
      box-shadow: inset 0 0 0 1px rgba(8,124,240,0) !important;
      transform: none;
    }

    :where(html.home-page) .calculator-options button:hover,
    :where(html.home-page) .calculator-options button.is-selected,
    :where(html.home-page) .calculator-options button:focus-visible {
      color: #fff !important;
      border-color: rgba(0,210,255,.88) !important;
      background: rgba(8,124,240,.78) !important;
      box-shadow: 0 0 38px rgba(8,124,240,.24), inset 0 0 26px rgba(0,210,255,.18) !important;
      transform: translateY(-3px) !important;
    }

    :where(html.home-page) .to-top {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border-radius: 50%;
      line-height: 1;
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    }

    :where(html.home-page) .to-top:hover {
      transform: translateY(-3px);
      background: #f7fbff;
      box-shadow: 0 14px 32px rgba(8, 124, 240, .18);
    }

    

    

    

    @keyframes scrollPulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.025), 0 0 7px rgba(83, 118, 255, .14); }
      50% { box-shadow: 0 0 0 1px rgba(255,255,255,.045), 0 0 12px rgba(83, 118, 255, .26); }
    }

    @keyframes scrollArrow {
      0%, 100% { transform: translateY(-8px); opacity: .58; }
      50% { transform: translateY(8px); opacity: 1; }
    }

    

    

    

    
    

    

    @keyframes trailFade {
      to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.2);
      }
    }

    :where(html.home-page) .faq details {
      position: relative;
      overflow: hidden;
      background-image: none;
      transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
    }

    :where(html.home-page) .faq details:nth-child(1) { --reveal-delay: 40ms; }
    :where(html.home-page) .faq details:nth-child(2) { --reveal-delay: 90ms; }
    :where(html.home-page) .faq details:nth-child(3) { --reveal-delay: 140ms; }
    :where(html.home-page) .faq details:nth-child(4) { --reveal-delay: 190ms; }
    :where(html.home-page) .faq details:nth-child(5) { --reveal-delay: 240ms; }
    :where(html.home-page) .faq details:nth-child(6) { --reveal-delay: 290ms; }

    :where(html.home-page) .faq details:hover {
      background-image: radial-gradient(circle at var(--faq-x, 50%) var(--faq-y, 50%), rgba(8,124,240,.10), transparent 34%);
      box-shadow: 0 18px 42px rgba(20, 32, 52, .08);
      transform: translateY(-1px);
    }

    :where(html.home-page) .contact {
      background: linear-gradient(180deg, #f8fbff 0%, #dbe7fb 13%, #8fb0ee 29%, #4778d6 43%, #102b60 62%, #071326 82%, #050812 100%) !important;
    }

    :where(html.home-page) .contact::before {
      top: -520px !important;
      height: 520px !important;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,251,255,.08) 28%, rgba(219,231,251,.22) 52%, rgba(143,176,238,.38) 74%, rgba(248,251,255,.72) 100%) !important;
    }

    :where(html.home-page) .projects,
    :where(html.home-page) .calculator,
    :where(html.home-page) .faq {
      background: #fff !important;
      color: #111215;
    }

    :where(html.home-page) .service-text {
      max-width: 310px !important;
    }

    
    :where(html.home-page) .button,
    :where(html.home-page) .calculator-inner,
    :where(html.home-page) .contact-form,
    :where(html.home-page) .faq,
    :where(html.home-page) .case-row,
    :where(html.home-page) .project,
    :where(html.home-page) .service-card {
      font-family: var(--font-sans);
    }

    :where(html.home-page) .cases-showcase-title,
    :where(html.home-page) .calculator-heading h2,
    :where(html.home-page) .contact-intro h2,
    :where(html.home-page) .faq h2 {
      font-size: var(--type-section) !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      letter-spacing: -.04em !important;
    }

    :where(html.home-page) .case-row-title {
      font-size: 40px !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      letter-spacing: -.035em !important;
    }

    :where(html.home-page) .case-row-meta,
    :where(html.home-page) .faq details p,
    :where(html.home-page) .calculator-options button,
    :where(html.home-page) .contact-form small {
      font-size: var(--type-body);
      line-height: 1.45;
    }

    :where(html.home-page) .case-row {
      min-height: 132px !important;
      padding-block: 30px !important;
      border-color: #d7d7d7 !important;
    }

    :where(html.home-page) .case-row-title {
      color: #161616 !important;
      font-size: clamp(42px, 4.7vw, 88px) !important;
      font-weight: 500 !important;
      letter-spacing: -.05em !important;
    }

    :where(html.home-page) .case-row-meta {
      color: #777 !important;
    }

    :where(html.home-page) .cases-list .case-row:hover {
      min-height: 132px !important;
      opacity: 1 !important;
    }

    :where(html.home-page) .case-hover-preview {
      width: min(430px, 32vw) !important;
      aspect-ratio: 1.45 !important;
      border-radius: 20px !important;
      box-shadow: 0 30px 90px rgba(20, 32, 52, .18) !important;
    }

    :where(html.home-page) .step::before {
      content: attr(data-step);
      position: absolute;
      z-index: 1;
      left: clamp(34px, 8vw, 140px);
      top: 50%;
      color: rgba(255,255,255,.045);
      font-family: var(--font-calculator);
      font-size: clamp(160px, 22vw, 390px);
      font-weight: 700;
      line-height: .75;
      letter-spacing: -.08em;
      transform: translateY(-50%);
      pointer-events: none;
    }

    :where(html.home-page) .step::after {
      content: "";
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      top: 50%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(103,170,255,.16), rgba(247,250,255,.72), rgba(103,170,255,.16), transparent);
      box-shadow: 0 0 18px rgba(8,124,240,.22);
      transform: translateY(-11px);
      pointer-events: none;
    }

    :where(html.home-page) .step-cluster {
      z-index: 4;
    }

    :where(html.home-page) .has-step-motion .step {
      opacity: .36;
      transition: opacity .78s var(--ease-aww), transform .78s var(--ease-aww);
      transform: scale(.94);
    }

    :where(html.home-page) .has-step-motion .step.is-step-visible {
      opacity: 1;
      transform: scale(1);
    }

    :where(html.home-page) .step h3 {
      font-size: clamp(24px, 2vw, 34px) !important;
      max-width: 520px !important;
    }

    :where(html.home-page) .step p {
      max-width: 410px !important;
    }

    :where(html.home-page) .faq {
      gap: clamp(60px, 8vw, 150px) !important;
      padding-top: 80px !important;
      padding-bottom: 78px !important;
    }

    :where(html.home-page) .faq h2 {
      flex-basis: 40% !important;
      font-size: clamp(48px, 3.75vw, 72px) !important;
      line-height: .95 !important;
    }

    :where(html.home-page) .faq details {
      margin: 0 !important;
      padding: 28px 0 !important;
      border-top: 1px solid rgba(17,18,21,.14);
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      transform: none !important;
    }

    :where(html.home-page) .faq details:last-child {
      border-bottom: 1px solid rgba(17,18,21,.14);
    }

    :where(html.home-page) .faq details:hover {
      background-image: linear-gradient(90deg, rgba(8,124,240,.08), transparent 55%) !important;
      box-shadow: none !important;
    }

    :where(html.home-page) .faq details[open] summary {
      color: var(--color-blue);
    }

    :where(html.home-page) .faq summary {
      align-items: center;
      color: #111215;
      font-size: 18px !important;
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    :where(html.home-page) .faq details p {
      max-width: 620px;
      color: rgba(17,18,21,.62) !important;
    }

    

    

    

    :where(html.home-page) .faq details p {
      max-height: 0;
      margin-top: 0;
      overflow: hidden;
      opacity: 0;
      transform: translate3d(0, -6px, 0);
      transition:
        max-height .64s cubic-bezier(.16, 1, .3, 1),
        opacity .42s ease,
        margin-top .42s ease,
        transform .64s cubic-bezier(.16, 1, .3, 1);
    }

    :where(html.home-page) .faq details[open] p {
      max-height: var(--faq-panel-height, 420px);
      margin-top: 14px;
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    :where(html.home-page) .faq details.is-closing p {
      max-height: 0;
      margin-top: 0;
      opacity: 0;
      transform: translate3d(0, -6px, 0);
    }

    @media (max-width: 900px) {
      :where(html.home-page) .cases-showcase {
        padding-top: 92px;
        padding-bottom: 110px;
      }

      :where(html.home-page) .cases-showcase-head,
    :where(html.home-page) .case-row {
        grid-template-columns: 1fr;
      }

      :where(html.home-page) .cases-showcase-head {
        gap: 26px;
        margin-bottom: 48px;
      }

      :where(html.home-page) .case-row {
        gap: 18px;
        min-height: 0;
        padding: 34px 0;
      }

      :where(html.home-page) .cases-showcase-title { font-size: 48px; }
      :where(html.home-page) .case-row-title { font-size: 34px; }
      :where(html.home-page) .case-row-meta { font-size: 18px; }
      :where(html.home-page) .case-row-year { justify-self: start; }
      :where(html.home-page) .case-hover-preview { display: none; }
      
      :where(html.home-page) .project-view-cursor{ display: none; }
      
      :where(html.home-page) .reveal-target { filter: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      
      :where(html.home-page) .reveal-target,
    :where(html.home-page) .case-row,
    :where(html.home-page) .case-hover-preview img {
        animation: none !important;
        transition: none !important;
        filter: none !important;
        transform: none !important;
      }

      :where(html.home-page) .reveal-target {
        opacity: 1;
      }
    }

    /* Cohesive AXIO system layer */
    :where(html.home-page) .contact {
      background:
        radial-gradient(circle at 50% 62%, rgba(92, 154, 255, .42), transparent 36%),
        radial-gradient(circle at 50% 82%, rgba(206, 224, 255, .72), transparent 28%),
        linear-gradient(180deg, #020817 0%, #082453 52%, #eaf3ff 100%);
    }

    :where(html.home-page) .contact {
      background:
        radial-gradient(circle at 50% 4%, rgba(226, 239, 255, .78), transparent 16%),
        radial-gradient(circle at 58% 22%, rgba(8, 124, 240, .28), transparent 32%),
        linear-gradient(180deg, #eaf3ff 0%, #082453 38%, #020817 100%);
    }

    
    :where(html.home-page) .services,
    :where(html.home-page) .projects,
    :where(html.home-page) .calculator,
    :where(html.home-page) .faq {
      background-color: #FFFFFF !important;
    }

    

    

    

    

    

    

    

    

    :where(html.home-page) .services .bento-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    :where(html.home-page) .services .service-card.big {
      grid-column: span 7 !important;
    }

    :where(html.home-page) .services .service-card.small {
      grid-column: span 5 !important;
    }

    :where(html.home-page) .steps {
      color: #FFFFFF !important;
      background: #000000 !important;
      overflow: clip !important;
      z-index: 8 !important;
    }

    :where(html.home-page) .steps-sticky {
      background:
        radial-gradient(circle at 50% 45%, rgba(5,18,38,.96), rgba(0,0,0,1) 58%),
        #000 !important;
    }

    :where(html.home-page) .steps-sticky::before {
      opacity: .28 !important;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0px, rgba(255,255,255,.006) 1px, transparent 1px, transparent 32px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E") !important;
      mix-blend-mode: screen !important;
    }

    :where(html.home-page) .steps-particles {
      z-index: 2 !important;
      opacity: 1;
      mix-blend-mode: screen;
    }

    :where(html.home-page) .step-left-line,
    :where(html.home-page) .step::after {
      background: linear-gradient(90deg, transparent, rgba(103,170,255,.16), rgba(247,250,255,.72), rgba(103,170,255,.16), transparent) !important;
      box-shadow: 0 0 18px rgba(8,124,240,.22) !important;
    }

    :where(html.home-page) .step::before {
      color: rgba(255,255,255,.045) !important;
    }

    :where(html.home-page) .step-copy span {
      color: rgba(255,255,255,.56) !important;
    }

    :where(html.home-page) .step h3 {
      color: #f6f0e7 !important;
    }

    :where(html.home-page) .step p {
      color: rgba(255,255,255,.62) !important;
    }

    :where(html.home-page) .steps-bottom-progress {
      color: rgba(94,142,224,.7) !important;
    }

    :where(html.home-page) .steps-bottom-wave {
      opacity: .85 !important;
    }

    :where(html.home-page) .project figure {
      box-shadow: 0 28px 90px rgba(8, 38, 86, .12);
      transition: box-shadow .7s var(--ease-aww), transform .7s var(--ease-aww);
    }

    :where(html.home-page) .projects {
      --project-rail: rgba(17,18,21,.08);
      counter-reset: project;
    }

    :where(html.home-page) .projects::before {
      content: "";
      position: sticky;
      z-index: 0;
      top: 68px;
      display: block;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--project-rail) 8%, var(--project-rail) 92%, transparent);
    }

    :where(html.home-page) .project {
      counter-increment: project;
    }

    :where(html.home-page) .project::before {
      content: "0" counter(project);
      position: absolute;
      left: var(--grid-margin);
      top: clamp(86px, 13vh, 138px);
      z-index: 3;
      color: #087cf0;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .08em;
    }

    :where(html.home-page) .project-copy {
      position: relative;
      padding-left: clamp(36px, 4vw, 72px);
    }

    :where(html.home-page) .project-copy::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, rgba(8,124,240,.38), rgba(17,18,21,.08) 42%, transparent);
    }

    :where(html.home-page) .project h3 {
      max-width: 7.8em;
      font-weight: 600 !important;
      letter-spacing: -.065em !important;
    }

    :where(html.home-page) .project-copy > div > p:last-child {
      color: rgba(17,18,21,.62);
    }

    :where(html.home-page) .project figure {
      border: 1px solid rgba(17,18,21,.08);
      border-radius: 20px;
      background: #eef3fb;
    }

    :where(html.home-page) .project figure::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(255,255,255,.16), transparent 18%, transparent 82%, rgba(255,255,255,.16)),
        radial-gradient(circle at var(--case-x, 50%) var(--case-y, 50%), rgba(8,124,240,.12), transparent 28%);
      opacity: .82;
      mix-blend-mode: screen;
    }

    :where(html.home-page) .project.is-case-active figure {
      box-shadow: 0 36px 110px rgba(8, 38, 86, .18);
    }

    :where(html.home-page) .case-link {
      backdrop-filter: blur(12px);
    }

    :where(html.home-page) .calculator {
      position: relative;
      overflow: hidden;
    }

    :where(html.home-page) .calculator::before {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: clamp(220px, 26vw, 420px);
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,0), rgba(234,243,255,.72) 38%, rgba(8,36,83,.20));
    }

    :where(html.home-page) .footer-brand,
    :where(html.home-page) .eyebrow,
    :where(html.home-page) .calculator-label {
      letter-spacing: .08em;
    }

    /* Restore original hero stage hierarchy */
    

    

    

    

    

    

    :where(html.home-page) .cookie-consent {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 50;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      width: min(520px, calc(100vw - 48px));
      padding: 14px 14px 14px 16px;
      border: 1px solid #E5E7EB;
      border-radius: 6px;
      color: #0F1015;
      background: #FFFFFF;
      box-shadow: 0 10px 30px rgba(0,0,0,0.04);
      opacity: 0;
      pointer-events: none;
      transform: translate3d(0, 50px, 0);
      transition: opacity .72s var(--ease-aww), transform .72s var(--ease-aww);
    }

    :where(html.home-page) .cookie-consent.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate3d(0, 0, 0);
    }

    :where(html.home-page) .cookie-consent.is-hiding {
      opacity: 0;
      pointer-events: none;
      transform: translate3d(calc(100% + 48px), 0, 0);
      transition: opacity .52s var(--ease-aww), transform .52s var(--ease-aww);
    }

    :where(html.home-page) .cookie-consent__dot {
      display: grid;
      place-items: center;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #0066FF;
      box-shadow: 0 0 18px rgba(0,102,255,.45);
    }

    :where(html.home-page) .cookie-consent__dot span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,.82);
    }

    :where(html.home-page) .cookie-consent p {
      margin: 0;
      color: #0F1015;
      font-size: 13px;
      line-height: 1.45;
      letter-spacing: -.01em;
    }

    :where(html.home-page) .cookie-consent__button {
      position: relative;
      min-height: 36px;
      overflow: hidden;
      border: 1px solid #0D0D0D;
      border-radius: 4px;
      padding: 0 14px;
      color: #0D0D0D;
      background: transparent;
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: color .3s var(--ease-aww), background .3s var(--ease-aww), transform .3s var(--ease-aww);
    }

    :where(html.home-page) .cookie-consent__button::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      mix-blend-mode: screen;
      transition: opacity .3s var(--ease-aww);
    }

    :where(html.home-page) .cookie-consent__button span {
      position: relative;
      z-index: 1;
    }

    :where(html.home-page) .cookie-consent__button:hover {
      color: #FFFFFF;
      background: #0D0D0D;
      transform: translateY(-1px);
    }

    :where(html.home-page) .cookie-consent__button:hover::before {
      opacity: .03;
    }

    @media (max-width: 900px) {
      :where(html.home-page) .services .bento-grid {
        grid-template-columns: 1fr;
      }

      :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
        grid-column: auto !important;
      }

      :where(html.home-page) .step-cluster {
        grid-template-columns: 1fr !important;
      }

      :where(html.home-page) .step-visual {
        width: min(72vw, 260px) !important;
        height: min(72vw, 260px) !important;
      }

      :where(html.home-page) .steps-bottom-progress {
        position: absolute !important;
        grid-template-columns: 1fr !important;
      }
    }

    :where(html.home-page) .steps,
    :where(html.home-page) .steps-sticky {
      background: var(--color--background) !important;
      color: var(--color--text) !important;
    }

    :where(html.home-page) .steps-sticky::before,
    :where(html.home-page) .steps-light-fader,
    :where(html.home-page) .steps-bottom-wave {
      display: none !important;
      opacity: 0 !important;
      background: none !important;
    }

    :where(html.home-page) .steps-particles {
      display: block !important;
      z-index: 2 !important;
      opacity: 1 !important;
      mix-blend-mode: screen;
      filter: none;
    }

    :where(html.home-page) main > section.section:not(.hero),
    :where(html.home-page) main > section.steps {
      margin-top: 0;
    }

    :where(html.home-page) footer.contact {
      margin-top: 0 !important;
    }

    :where(html.home-page) .case-link {
      display: none !important;
    }

    :where(html.home-page) .steps-transition-panel {
      position: fixed;
      z-index: 7;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      background: var(--color--background);
      border-radius: 34px 34px 0 0;
      transform: translate3d(0, 100%, 0);
      will-change: transform, opacity, border-radius;
    }

    :where(html.home-page) .steps {
      background: transparent !important;
      overflow: visible !important;
    }

    :where(html.home-page) .steps-sticky {
      overflow: hidden !important;
      border-radius: var(--steps-panel-radius, 0) var(--steps-panel-radius, 0) 0 0;
      background: var(--color--background) !important;
      transform: translate3d(0, var(--steps-panel-y, 0%), 0);
      will-change: transform, border-radius;
    }

    :where(html.home-page) .steps-stage,
    :where(html.home-page) .steps-label,
    :where(html.home-page) .steps-bottom-progress {
      opacity: var(--steps-content-opacity, 1);
      transform: translate3d(0, var(--steps-content-y, 0px), 0);
      transition: opacity .18s ease, transform .18s ease;
    }

    :where(html.home-page) .step-left-line {
      display: none !important;
    }

    :where(html.home-page) .step-copy {
      position: relative;
    }

    :where(html.home-page) .step-copy::after {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      left: min(100%, 430px) !important;
      top: 50% !important;
      width: clamp(180px, 16vw, 300px) !important;
      height: 1px !important;
      margin-left: 44px !important;
      background: linear-gradient(90deg, rgba(255,255,255,.68), rgba(255,255,255,.08)) !important;
      transform: translateY(-50%) scaleX(var(--steps-progress, 0)) !important;
      transform-origin: left center !important;
      box-shadow: none !important;
    }

    :where(html.home-page) .calculator {
      margin-top: 0 !important;
      padding-top: clamp(104px, 9vw, 160px) !important;
      padding-bottom: clamp(104px, 9vw, 160px) !important;
      background: var(--color--background) !important;
      clear: both;
    }

    :where(html.home-page) .calculator::before {
      display: none !important;
    }

    :where(html.home-page) .calculator-panel {
      width: min(var(--grid-max), calc(100vw - var(--grid-margin) * 2)) !important;
      min-height: auto !important;
      margin: 0 auto !important;
      padding: 0 !important;
      overflow: visible !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    :where(html.home-page) .calculator-inner {
      width: 100% !important;
      gap: 56px !important;
      align-items: stretch !important;
    }

    :where(html.home-page) .calculator-heading {
      align-items: flex-start !important;
      text-align: left !important;
      gap: 22px !important;
    }

    :where(html.home-page) .calculator-label {
      color: #087cf0 !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      letter-spacing: .02em !important;
    }

    :where(html.home-page) .calculator-heading h2 {
      max-width: 980px !important;
      color: #111215 !important;
      font-size: clamp(48px, 5.4vw, 96px) !important;
      font-weight: 600 !important;
      line-height: .92 !important;
      letter-spacing: -.055em !important;
    }

    :where(html.home-page) .calculator-content {
      align-items: stretch !important;
      gap: 36px !important;
    }

    :where(html.home-page) .calculator-progress {
      display: grid !important;
      grid-template-columns: 64px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 18px !important;
      width: 100% !important;
      padding-top: 0 !important;
    }

    :where(html.home-page) .calculator-progress-value {
      position: static !important;
      padding: 0 !important;
      border-radius: 0 !important;
      color: #111215 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-family: var(--font-mono) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      transform: none !important;
    }

    :where(html.home-page) .calculator-progress-track {
      height: 6px !important;
      border-radius: 0 !important;
      background: #e5e7eb !important;
    }

    :where(html.home-page) .calculator-progress-track span {
      position: relative;
      overflow: hidden;
      border-radius: 0 !important;
      background: #111215 !important;
      transition: width .62s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .calculator-progress-track span::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      background-image: radial-gradient(rgba(255,255,255,.65) 1px, transparent 1px);
      background-size: 5px 5px;
    }

    :where(html.home-page) .calculator-progress-track span.is-glitching::after {
      animation: calcProgressGlitch .62s steps(5, end);
    }

    @keyframes calcProgressGlitch {
      0%, 100% { opacity: 0; transform: translateX(0); }
      20% { opacity: .22; transform: translateX(-7px); }
      42% { opacity: .12; transform: translateX(5px); }
      64% { opacity: .18; transform: translateX(-3px); }
    }

    :where(html.home-page) .calculator-question {
      transition: opacity .44s cubic-bezier(.34, 1.56, .64, 1), transform .44s cubic-bezier(.34, 1.56, .64, 1), filter .44s ease !important;
    }

    :where(html.home-page) .calculator-question.is-exiting {
      opacity: 0 !important;
      filter: blur(8px) !important;
      transform: translate3d(-34px, 0, 0) scale(.985) !important;
    }

    :where(html.home-page) .calculator-question.is-entering {
      opacity: 0 !important;
      filter: blur(8px) !important;
      transform: translate3d(38px, 0, 0) scale(.985) !important;
    }

    :where(html.home-page) .calculator-question legend {
      margin-bottom: 0 !important;
      color: #111215 !important;
      font-size: clamp(24px, 2.2vw, 40px) !important;
      font-weight: 500 !important;
      letter-spacing: -.035em !important;
    }

    :where(html.home-page) .calculator-options {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 0 !important;
      margin-top: 30px !important;
      border-top: 1px solid #e5e7eb !important;
      border-left: 1px solid #e5e7eb !important;
    }

    :where(html.home-page) .calculator-options button {
      min-height: 104px !important;
      padding: 28px 30px !important;
      border: 0 !important;
      border-right: 1px solid #e5e7eb !important;
      border-bottom: 1px solid #e5e7eb !important;
      border-radius: 0 !important;
      color: #111215 !important;
      background: #fff !important;
      box-shadow: none !important;
      outline: 0 !important;
      font-size: 18px !important;
      line-height: 1.16 !important;
      transition: color .3s cubic-bezier(.16,1,.3,1), background .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1) !important;
    }

    :where(html.home-page) .calculator-options button::before {
      width: 100% !important;
      opacity: 0 !important;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
      background-color: transparent !important;
      mix-blend-mode: screen;
      transition: opacity .3s ease !important;
    }

    :where(html.home-page) .calculator-options button:hover,
    :where(html.home-page) .calculator-options button:focus-visible {
      color: #fff !important;
      background: #0d0d0d !important;
      transform: none !important;
      border-color: #e5e7eb !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    :where(html.home-page) .calculator-options button:hover::before,
    :where(html.home-page) .calculator-options button:focus-visible::before {
      opacity: .02 !important;
    }

    :where(html.home-page) .calculator-options button.is-selected {
      color: #fff !important;
      background: #0d0d0d !important;
    }

    :where(html.home-page) .calculator-options button.is-selected::before {
      opacity: .02 !important;
    }

    :where(html.home-page) .faq {
      background: #fff !important;
    }

    :where(html.home-page) .faq details {
      margin: 0 !important;
      padding: 0 !important;
      border-bottom: 1px solid rgba(17,18,21,.12) !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      transition: background-color .3s cubic-bezier(.25,1,.5,1);
    }

    :where(html.home-page) .faq details:hover {
      background-image: linear-gradient(90deg, rgba(0,102,255,.055), transparent 62%) !important;
    }

    :where(html.home-page) .faq summary {
      position: relative;
      display: block !important;
      padding: 24px 56px 24px 0 !important;
      color: #111215;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.25;
      cursor: pointer;
      list-style: none;
      transition: color .3s cubic-bezier(.25,1,.5,1), font-weight .3s cubic-bezier(.25,1,.5,1);
    }

    :where(html.home-page) .faq summary::-webkit-details-marker {
      display: none;
    }

    :where(html.home-page) .faq details[open] summary {
      color: #0066FF !important;
      font-weight: 700 !important;
    }

    :where(html.home-page) .faq summary::after {
      content: "" !important;
      position: absolute;
      top: 25px;
      right: 2px;
      width: 18px;
      height: 18px;
      background: none !important;
      border: 0 !important;
      transform: rotate(0deg);
      transition: transform .3s cubic-bezier(.25,1,.5,1);
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7L9 12L14 7' stroke='%23111215' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      background-size: 18px 18px !important;
    }

    :where(html.home-page) .faq details[open] summary::after {
      transform: rotate(180deg);
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7L9 12L14 7' stroke='%230066FF' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    }

    :where(html.home-page) .faq details p {
      display: grid !important;
      grid-template-rows: 0fr;
      max-width: 720px !important;
      max-height: none !important;
      margin: 0 !important;
      padding: 0 48px 0 16px !important;
      overflow: hidden;
      color: #5f6670 !important;
      font-size: 16px;
      line-height: 1.55;
      opacity: 1 !important;
      transform: none !important;
      transition: grid-template-rows .48s cubic-bezier(.25,1,.5,1), padding .48s cubic-bezier(.25,1,.5,1) !important;
    }

    :where(html.home-page) .faq details[open] p {
      grid-template-rows: 1fr;
      padding: 8px 48px 24px 16px !important;
    }

    :where(html.home-page) .faq details.is-closing p {
      grid-template-rows: 0fr;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    :where(html.home-page) .faq-answer-inner {
      display: block;
      min-height: 0;
      overflow: hidden;
    }

    @media (max-width: 900px) {
      :where(html.home-page) main > section.section:not(.hero),
    :where(html.home-page) main > section.steps {
        margin-top: 0;
      }

      :where(html.home-page) footer.contact {
        margin-top: 0 !important;
      }

      :where(html.home-page) .steps-transition-panel {
        display: none !important;
      }

      :where(html.home-page) .steps-sticky {
        transform: translate3d(0, 0, 0) !important;
        border-radius: 0 !important;
      }

      :where(html.home-page) .steps-stage,
    :where(html.home-page) .steps-label,
    :where(html.home-page) .steps-bottom-progress {
        opacity: 1 !important;
        transform: none !important;
      }

      :where(html.home-page) .step-copy::after {
        display: none !important;
      }

      :where(html.home-page) .calculator-panel {
        width: calc(100vw - 32px) !important;
      }

      :where(html.home-page) .calculator-options {
        grid-template-columns: 1fr !important;
      }

      :where(html.home-page) .calculator-heading h2 {
        font-size: 38px !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :where(html.home-page) .steps-sticky,
    :where(html.home-page) .steps-stage,
    :where(html.home-page) .steps-label,
    :where(html.home-page) .steps-bottom-progress,
    :where(html.home-page) .calculator-question,
    :where(html.home-page) .calculator-progress-track span {
        transition: none !important;
        transform: none !important;
      }
    }
  

    /* Mobile navigation and accessibility guardrails */
    :where(html.home-page) :where(a, button, input, textarea, summary, [tabindex]):focus-visible {
      outline: 2px solid #386ABB;
      outline-offset: 4px;
    }

    

    @media (hover: none) {
      :where(html.home-page) .service-card,
    :where(html.home-page) .project,
    :where(html.home-page) .calculator-options button,
    :where(html.home-page) .button { transform: none !important; }
    }
    /* Stage 7/8 polish: calm FAQ, stronger footer, cinematic steps light */
    :where(html.home-page) .project .case-link {
      display: none !important;
    }

    :where(html.home-page) .steps-particles {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      opacity: .9 !important;
      transform: none !important;
      will-change: auto !important;
    }

    :where(html.home-page) .step {
      opacity: .2;
      filter: brightness(.55) saturate(.82);
      transition: opacity .72s var(--ease-aww), filter .72s var(--ease-aww);
    }

    :where(html.home-page) .step.is-step-visible {
      opacity: 1;
      filter: brightness(1) saturate(1);
    }

    :where(html.home-page) .step-cluster {
      position: absolute;
      isolation: isolate;
    }

    :where(html.home-page) .step-cluster::before {
      display: none;
      content: none;
    }

    :where(html.home-page) .step.is-step-visible .step-cluster::before {
      opacity: 0;
    }

    :where(html.home-page) .step-visual {
      opacity: .42;
      transition: opacity .72s var(--ease-aww), transform .72s var(--ease-aww), box-shadow .72s var(--ease-aww);
    }

    :where(html.home-page) .step.is-step-visible .step-visual {
      opacity: 1;
      transform: none;
      box-shadow: none;
    }

    :where(html.home-page) .step-copy span,
    :where(html.home-page) .step h3,
    :where(html.home-page) .step p {
      transition: color .72s var(--ease-aww), opacity .72s var(--ease-aww), text-shadow .72s var(--ease-aww);
    }

    :where(html.home-page) .step:not(.is-step-visible) .step-copy span,
    :where(html.home-page) .step:not(.is-step-visible) h3,
    :where(html.home-page) .step:not(.is-step-visible) p {
      opacity: .46;
      text-shadow: none;
    }

    :where(html.home-page) .step.is-step-visible .step-copy span {
      color: rgba(255,255,255,.72) !important;
      text-shadow: none;
    }

    :where(html.home-page) .step.is-step-visible h3 {
      color: #fff !important;
      text-shadow: none;
    }

    :where(html.home-page) .step.is-step-visible p {
      color: rgba(255,255,255,.74) !important;
    }

    :where(html.home-page) .faq {
      display: grid !important;
      grid-template-columns: minmax(280px, .62fr) minmax(0, 1fr);
      gap: clamp(58px, 8vw, 150px) !important;
      padding-top: clamp(112px, 10vw, 168px) !important;
      padding-bottom: clamp(112px, 10vw, 168px) !important;
      background: #fff !important;
    }

    :where(html.home-page) .faq h2 {
      position: sticky;
      top: 120px;
      align-self: start;
      max-width: 620px;
      font-size: clamp(48px, 4.7vw, 86px) !important;
      font-weight: 520 !important;
      letter-spacing: -.055em !important;
    }

    :where(html.home-page) .faq-list {
      border-top: 1px solid rgba(15,16,21,.08);
    }

    :where(html.home-page) .faq details {
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-bottom: 1px solid rgba(15,16,21,.08) !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      transform: none !important;
    }

    :where(html.home-page) .faq summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      min-height: 92px;
      padding: 28px 0;
      color: #0F1015 !important;
      font-size: clamp(19px, 1.45vw, 26px) !important;
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: -.035em;
      transition: color .42s var(--ease-aww), padding-left .42s var(--ease-aww);
    }

    :where(html.home-page) .faq summary::after {
      content: "";
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
      border-right: 1px solid currentColor;
      border-bottom: 1px solid currentColor;
      transform: rotate(45deg);
      transition: transform .42s var(--ease-aww), color .42s var(--ease-aww);
    }

    :where(html.home-page) .faq details[open] summary {
      color: #386ABB !important;
      font-weight: 650;
    }

    :where(html.home-page) .faq details[open] summary::after {
      transform: rotate(225deg);
    }

    :where(html.home-page) .faq details:hover summary {
      padding-left: 10px;
      color: #386ABB !important;
    }

    :where(html.home-page) .faq details p {
      max-width: 760px !important;
      margin: 0 !important;
      padding: 0 72px 34px 0;
      color: rgba(15,16,21,.62) !important;
      font-size: clamp(16px, 1.08vw, 19px) !important;
      line-height: 1.55 !important;
    }

    :where(html.home-page) .contact {
      min-height: 900px !important;
      padding-top: clamp(112px, 10vw, 170px) !important;
      background: var(--gradient-hero-reversed) !important;
    }

    :where(html.home-page) .footer-kicker {
      margin: 0 0 26px;
      color: rgba(255,255,255,.48);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    :where(html.home-page) .footer-subtitle {
      max-width: 620px;
      margin: 26px 0 0;
      color: rgba(255,255,255,.68);
      font-size: clamp(18px, 1.35vw, 24px);
      line-height: 1.35;
      letter-spacing: -.025em;
    }

    :where(html.home-page) .contact-intro nav {
      margin-top: clamp(64px, 8vw, 120px) !important;
    }

    :where(html.home-page) .contact-form {
      padding-top: clamp(18px, 3vw, 44px) !important;
    }

    :where(html.home-page) .contact-form .button {
      min-width: 190px;
    }

    :where(html.home-page) .legal {
      grid-template-columns: repeat(3, max-content) !important;
      width: auto !important;
      gap: 18px 34px !important;
    }

    @media (max-width: 900px) {
      :where(html.home-page) .faq {
        grid-template-columns: 1fr;
        gap: 42px !important;
      }

      :where(html.home-page) .faq h2 {
        position: static;
      }

      :where(html.home-page) .faq summary {
        min-height: 78px;
        padding: 23px 0;
      }

      :where(html.home-page) .faq details p {
        padding-right: 28px;
      }

      :where(html.home-page) .contact {
        min-height: auto !important;
      }
    }

    /* Services: dark technological Bento Grid */
    :where(html.home-page) .services {
      position: relative;
      overflow: hidden;
      color: #fff !important;
      background: #08090F !important;
      padding-top: clamp(112px, 10vw, 176px) !important;
      padding-bottom: clamp(112px, 10vw, 176px) !important;
    }

    :where(html.home-page) .services::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 16% 12%, rgba(56,106,187,.16), transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(0,229,255,.08), transparent 30%);
      opacity: .72;
    }

    :where(html.home-page) .services-inner {
      position: relative;
      z-index: 1;
    }

    :where(html.home-page) .services-title {
      margin: 0;
      max-width: 960px;
      font-family: "Manrope", var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
      font-size: clamp(3rem, 7vw, 8rem);
      line-height: .9;
      letter-spacing: -.055em;
      font-weight: 800;
      text-transform: uppercase;
      color: #fff;
    }

    :where(html.home-page) .services .bento-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 20px !important;
      margin-top: clamp(56px, 7vw, 112px) !important;
      perspective: none !important;
    }

    :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
      grid-column: auto !important;
      position: relative;
      min-height: clamp(320px, 30vw, 460px) !important;
      padding: clamp(28px, 3.2vw, 54px) !important;
      overflow: hidden;
      display: flex !important;
      align-items: stretch;
      color: #fff !important;
      background: #0D0E15 !important;
      border: 1px solid #161722 !important;
      border-radius: 16px !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transform: none !important;
      transition:
        background-color .42s var(--ease-aww),
        border-color .42s var(--ease-aww),
        transform .42s var(--ease-aww) !important;
    }

    :where(html.home-page) .services .service-card::before,
    :where(html.home-page) .services .service-card::after {
      display: none !important;
      content: none !important;
    }

    :where(html.home-page) .services .service-content {
      position: relative;
      z-index: 1;
      height: 100%;
      width: 100%;
      display: flex !important;
      flex-direction: column;
      justify-content: space-between;
      gap: clamp(54px, 8vw, 122px);
      transform: none !important;
      transition: none !important;
    }

    :where(html.home-page) .services .service-visual {
      display: none !important;
    }

    :where(html.home-page) .services .service-num {
      display: inline-block;
      margin-bottom: 24px;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 13px;
      line-height: 1;
      letter-spacing: .24em;
      color: rgba(255,255,255,.34) !important;
      transition: color .42s var(--ease-aww);
    }

    :where(html.home-page) .services .service-title {
      margin: 0;
      max-width: 720px;
      font-family: "Manrope", var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
      font-size: clamp(2rem, 3.4vw, 4.2rem);
      line-height: .92;
      letter-spacing: -.045em;
      font-weight: 800;
      text-transform: uppercase;
      color: #fff !important;
      transition: color .42s var(--ease-aww);
    }

    :where(html.home-page) .services .service-text {
      max-width: 640px !important;
      margin: 0 !important;
      font-family: "Manrope", var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
      font-size: clamp(17px, 1.24vw, 22px) !important;
      line-height: 1.45 !important;
      letter-spacing: -.015em;
      color: rgba(255,255,255,.6) !important;
      transition: color .42s var(--ease-aww), opacity .42s var(--ease-aww);
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services .service-card:hover {
        background: #111424 !important;
        border-color: #00E5FF !important;
        transform: translate3d(0, -4px, 0) !important;
      }

      :where(html.home-page) .services .service-card:hover .service-num {
        color: rgba(0,229,255,.82) !important;
      }

      :where(html.home-page) .services .service-card:hover .service-text {
        color: rgba(255,255,255,1) !important;
      }
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .services .bento-grid {
        grid-template-columns: 1fr !important;
      }

      :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
        transform: none !important;
        transition: none !important;
      }

      :where(html.home-page) .services .service-text {
        color: rgba(255,255,255,.68) !important;
      }
    }

    @media (max-width: 900px) {
      

      
      :where(html.home-page) .button,
    :where(html.home-page) .calculator-options button,
    :where(html.home-page) .contact-form input,
    :where(html.home-page) .contact-form textarea {
        min-height: 44px;
      }

      

      

      

      

      

      

      

      

      

      :where(html.home-page) .services {
        padding-top: 84px !important;
        padding-bottom: 96px !important;
      }

      :where(html.home-page) .services .bento-grid,
    :where(html.home-page) .bento-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 42px !important;
      }

      :where(html.home-page) .services-title {
        font-size: clamp(2.6rem, 15vw, 5.4rem) !important;
        letter-spacing: -.05em;
      }

      :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
        min-height: 280px !important;
        padding: 28px !important;
        border-color: #161722 !important;
        background: #0D0E15 !important;
        transform: none !important;
        transition: none !important;
      }

      :where(html.home-page) .services .service-title {
        font-size: clamp(2rem, 10vw, 3.25rem) !important;
      }

      :where(html.home-page) .services .service-text {
        max-width: 100% !important;
        font-size: 16px !important;
        color: rgba(255,255,255,.68) !important;
      }

      :where(html.home-page) .service-visual,
    :where(html.home-page) .service-card.small .service-visual {
        display: none !important;
      }

      :where(html.home-page) .projects {
        height: auto !important;
        min-height: auto !important;
        display: grid !important;
        gap: 72px !important;
        padding-bottom: 96px !important;
      }

      :where(html.home-page) .project {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        gap: 24px !important;
        padding-block: 56px 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
      }

      :where(html.home-page) .project::before,
    :where(html.home-page) .project-copy::before {
        display: none !important;
      }

      :where(html.home-page) .project-copy {
        min-height: auto !important;
        padding: 0 !important;
      }

      :where(html.home-page) .project h3 {
        font-size: clamp(38px, 12vw, 64px) !important;
        line-height: .92 !important;
      }

      :where(html.home-page) .project figure {
        min-height: auto !important;
        aspect-ratio: 4 / 3;
      }

      :where(html.home-page) .project figure img {
        aspect-ratio: 4 / 3 !important;
      }

      :where(html.home-page) .tags li {
        min-height: 34px;
        display: inline-flex;
        align-items: center;
      }

      :where(html.home-page) .steps {
        min-height: 760px !important;
        height: auto !important;
      }

      :where(html.home-page) .steps-sticky {
        min-height: 760px !important;
        height: 760px !important;
        border-radius: 0 !important;
      }

      :where(html.home-page) .step h3 {
        font-size: clamp(28px, 9vw, 40px) !important;
      }

      :where(html.home-page) .step p {
        font-size: 16px !important;
        line-height: 1.55 !important;
      }

      :where(html.home-page) .calculator {
        padding-top: 86px !important;
        padding-bottom: 94px !important;
      }

      :where(html.home-page) .calculator-options {
        grid-template-columns: 1fr !important;
      }

      :where(html.home-page) .faq summary {
        min-height: 72px;
        font-size: 19px !important;
      }

      :where(html.home-page) .faq details p {
        padding: 2px 48px 28px 0 !important;
      }

      :where(html.home-page) .contact {
        padding-inline: 20px !important;
      }

      :where(html.home-page) .contact-form .button {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 560px) {
      :where(html.home-page) .project h3 {
        font-size: clamp(34px, 13vw, 52px) !important;
      }

      :where(html.home-page) .footer-subtitle {
        font-size: 17px !important;
      }

      :where(html.home-page) .legal {
        grid-template-columns: 1fr !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      

      :where(html.home-page) .steps-particles,
    :where(html.home-page) .pixel-reveal-canvas {
        display: none !important;
      }

      :where(html.home-page) .step,
    :where(html.home-page) .project,
    :where(html.home-page) .service-card,
    :where(html.home-page) .faq summary::after {
        transition: none !important;
        animation: none !important;
      }
    }

    /* Final layout pass: white About, restored Services, horizontal Projects */
    

    

    

    

    

    

    :where(html.home-page) .services {
      color: #111111 !important;
      background: #FFFFFF !important;
      padding-top: clamp(96px, 9vw, 150px) !important;
      padding-bottom: clamp(104px, 10vw, 168px) !important;
    }

    :where(html.home-page) .services::before {
      display: none !important;
    }

    :where(html.home-page) .services .eyebrow {
      color: rgba(17,17,17,.52) !important;
    }

    :where(html.home-page) .services .dot::before {
      color: #087cf0 !important;
    }

    :where(html.home-page) .services .bento-grid {
      display: grid !important;
      grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
      gap: 32px !important;
      margin-top: clamp(34px, 5vw, 76px) !important;
      perspective: 1200px !important;
    }

    :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
      position: relative;
      min-height: clamp(390px, 42vw, 560px) !important;
      overflow: hidden;
      padding: clamp(28px, 3.2vw, 48px) !important;
      color: #111111 !important;
      background: #EAF0FB !important;
      border: 1px solid rgba(0,0,0,.08) !important;
      border-radius: 20px !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transform: rotateX(var(--service-rx, 0deg)) rotateY(var(--service-ry, 0deg)) translateY(var(--service-y, 0px)) !important;
      transform-style: preserve-3d;
      transition:
        transform .56s var(--ease-aww),
        background-color .34s var(--ease-aww),
        color .34s var(--ease-aww),
        border-color .34s var(--ease-aww) !important;
    }

    :where(html.home-page) .services .service-card.big {
      grid-column: span 7 !important;
    }

    :where(html.home-page) .services .service-card.small {
      grid-column: span 5 !important;
    }

    :where(html.home-page) .services .service-card::before,
    :where(html.home-page) .services .service-card::after {
      display: block !important;
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .34s var(--ease-aww), transform .34s var(--ease-aww);
    }

    :where(html.home-page) .services .service-card::before {
      z-index: 1;
      background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 26%),
        radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
      background-size: auto, 16px 16px;
    }

    :where(html.home-page) .services .service-content {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex !important;
      flex-direction: column;
      justify-content: space-between;
      gap: 42px;
      transform: none !important;
      transition: transform .34s var(--ease-aww) !important;
    }

    :where(html.home-page) .services .service-title {
      margin: 0;
      color: #111111 !important;
      font-size: clamp(2rem, 3.2vw, 4.1rem) !important;
      line-height: .92 !important;
      letter-spacing: -.045em !important;
      font-weight: 800 !important;
      text-transform: none !important;
    }

    :where(html.home-page) .services .service-num {
      color: rgba(17,17,17,.42) !important;
    }

    :where(html.home-page) .services .service-text {
      max-width: 310px !important;
      margin: 0 !important;
      color: rgba(17,17,17,.68) !important;
      font-size: clamp(16px, 1.1vw, 19px) !important;
      line-height: 1.45 !important;
    }

    :where(html.home-page) .services .service-visual,
    :where(html.home-page) .services .service-card.small .service-visual {
      display: block !important;
      position: absolute;
      right: clamp(18px, 4vw, 54px);
      bottom: clamp(18px, 4vw, 52px);
      width: min(48%, 360px);
      height: auto;
      opacity: .96;
      filter: none;
      z-index: 1;
      transition: opacity .34s var(--ease-aww), transform .34s var(--ease-aww);
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services .bento-grid:hover .service-card {
        opacity: 1 !important;
      }

      :where(html.home-page) .services .service-card:hover {
        --service-y: -4px;
        color: #FFFFFF !important;
        background: #0D0D0D !important;
        border-color: rgba(0,0,0,.08) !important;
      }

      :where(html.home-page) .services .service-card:hover::before {
        opacity: 1 !important;
      }

      :where(html.home-page) .services .service-card:hover .service-content {
        transform: translate3d(0, -4px, 0) !important;
      }

      :where(html.home-page) .services .service-card:hover .service-title {
        color: #FFFFFF !important;
      }

      :where(html.home-page) .services .service-card:hover .service-num {
        color: rgba(255,255,255,.52) !important;
      }

      :where(html.home-page) .services .service-card:hover .service-text {
        color: rgba(255,255,255,.68) !important;
      }

      :where(html.home-page) .services .service-card:hover .service-visual {
        opacity: .72;
        filter: invert(1) grayscale(1);
      }
    }

    :where(html.home-page) .projects {
      --projects-x: 0px;
      --projects-progress: 0%;
      position: relative !important;
      overflow: clip !important;
      min-height: 100vh !important;
      color: #fff !important;
      background: var(--color--background) !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    :where(html.home-page) .projects::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 16%, rgba(56,106,187,.16), transparent 32%),
        radial-gradient(circle at 78% 60%, rgba(0,229,255,.07), transparent 34%);
    }

    :where(html.home-page) .projects-title {
      position: sticky;
      z-index: 4;
      top: 96px;
      width: min(var(--grid-max), calc(100vw - var(--grid-margin) * 2));
      margin: 0 auto;
      padding-top: clamp(88px, 8vw, 136px);
      font-family: "Manrope", var(--font-sans);
      font-size: clamp(3rem, 7vw, 8rem);
      line-height: .9;
      letter-spacing: -.055em;
      font-weight: 800;
      text-transform: uppercase;
      color: #fff;
    }

    :where(html.home-page) .projects-track {
      position: sticky;
      z-index: 3;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      gap: 40px;
      width: max-content;
      padding-left: var(--grid-margin);
      padding-right: var(--grid-margin);
      transform: translate3d(var(--projects-x), 0, 0);
      will-change: transform;
    }

    :where(html.home-page) .project {
      position: relative !important;
      inset: auto !important;
      flex: 0 0 min(1180px, calc(100vw - var(--grid-margin) * 2)) !important;
      height: min(68vh, 640px) !important;
      min-height: 520px !important;
      display: grid !important;
      grid-template-columns: minmax(330px, .42fr) minmax(0, .58fr);
      gap: clamp(24px, 4vw, 58px) !important;
      align-items: stretch;
      padding: clamp(26px, 3vw, 46px) !important;
      border: 1px solid #161722;
      border-radius: 24px;
      background: #0D0E15;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
    }

    :where(html.home-page) .project::before,
    :where(html.home-page) .project-copy::before {
      display: none !important;
    }

    :where(html.home-page) .project-copy {
      min-height: 0 !important;
      padding: 0 !important;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 28px;
      color: #fff;
      opacity: 1 !important;
      transform: none !important;
    }

    :where(html.home-page) .project .eyebrow {
      color: rgba(255,255,255,.45) !important;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    :where(html.home-page) .project h3 {
      color: #fff !important;
      font-size: clamp(3rem, 5vw, 6.8rem) !important;
      line-height: .88 !important;
      letter-spacing: -.06em !important;
      font-weight: 800 !important;
    }

    :where(html.home-page) .project p:not(.eyebrow) {
      max-width: 520px;
      color: rgba(255,255,255,.6) !important;
      font-size: clamp(17px, 1.22vw, 22px);
      line-height: 1.45;
    }

    :where(html.home-page) .project .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    :where(html.home-page) .project .tags li {
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      color: rgba(255,255,255,.56);
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    :where(html.home-page) .project figure {
      position: relative;
      min-height: 0 !important;
      height: 100% !important;
      margin: 0;
      overflow: hidden;
      border-radius: 16px !important;
      background: #111424;
      box-shadow: none !important;
      transform: none !important;
    }

    :where(html.home-page) .project figure img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: auto !important;
      filter: none !important;
      transform: scale(var(--case-image-scale, 1));
      transition: transform .9s var(--ease-aww);
    }

    :where(html.home-page) .project:hover figure img {
      transform: scale(1.035);
    }

    :where(html.home-page) .projects-progress {
      position: sticky;
      z-index: 5;
      left: var(--grid-margin);
      bottom: 34px;
      width: calc(100vw - var(--grid-margin) * 2);
      height: 1px;
      margin-left: var(--grid-margin);
      background: rgba(255,255,255,.12);
      overflow: hidden;
    }

    :where(html.home-page) .projects-progress span {
      display: block;
      width: var(--projects-progress);
      height: 100%;
      background: #00E5FF;
      box-shadow: 0 0 18px rgba(0,229,255,.58);
    }

    :where(html.home-page) .project-view-cursor {
      width: 118px !important;
      height: 118px !important;
      border-radius: 999px;
      border: 1px solid rgba(0,229,255,.78);
      background: rgba(0,229,255,.08);
      color: #fff;
      box-shadow: 0 0 34px rgba(0,229,255,.32);
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace;
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-align: center;
      display: grid;
      place-items: center;
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .projects {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        padding: 86px var(--grid-margin) 96px !important;
      }

      :where(html.home-page) .projects-title {
        position: static;
        width: auto;
        padding-top: 0;
        margin-bottom: 42px;
        font-size: clamp(2.6rem, 14vw, 5.2rem);
      }

      :where(html.home-page) .projects-track {
        position: relative;
        top: auto;
        height: auto;
        width: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 0;
        transform: none !important;
      }

      :where(html.home-page) .project {
        flex: none !important;
        min-height: auto !important;
        height: auto !important;
        grid-template-columns: 1fr;
        gap: 22px !important;
        padding: 22px !important;
        border-radius: 20px;
      }

      :where(html.home-page) .project figure {
        aspect-ratio: 4 / 3;
        order: -1;
      }

      :where(html.home-page) .project h3 {
        font-size: clamp(2.4rem, 11vw, 4.4rem) !important;
      }

      :where(html.home-page) .projects-progress,
    :where(html.home-page) .project-view-cursor,
    :where(html.home-page) .pixel-reveal-canvas {
        display: none !important;
      }
    }

    /* Requested final fixes: centered About, visible Projects, scanner Steps */
    

    

    

    :where(html.home-page) .projects {
      position: relative !important;
      background: #08090F !important;
      color: #fff !important;
    }

    :where(html.home-page) .projects-title {
      position: absolute !important;
      z-index: 6 !important;
      top: clamp(86px, 9vh, 124px) !important;
      left: var(--grid-margin) !important;
      width: min(900px, calc(100vw - var(--grid-margin) * 2)) !important;
      margin: 0 !important;
      padding: 0 !important;
      pointer-events: none;
    }

    :where(html.home-page) .projects-track {
      position: sticky !important;
      top: 0 !important;
      height: 100vh !important;
      align-items: center !important;
      padding-top: clamp(84px, 9vh, 120px) !important;
      box-sizing: border-box;
    }

    :where(html.home-page) .project {
      height: clamp(430px, 54vh, 560px) !important;
      min-height: 430px !important;
      max-height: 560px !important;
      grid-template-columns: minmax(300px, .42fr) minmax(0, .58fr) !important;
    }

    :where(html.home-page) .project h3 {
      font-size: clamp(2.65rem, 4.2vw, 5.4rem) !important;
    }

    :where(html.home-page) .project p:not(.eyebrow) {
      font-size: clamp(16px, 1.05vw, 19px) !important;
    }

    :where(html.home-page) .projects-progress {
      position: absolute !important;
      bottom: 34px !important;
      left: var(--grid-margin) !important;
      margin-left: 0 !important;
    }

    :where(html.home-page) .steps-scanner {
      position: relative !important;
      min-height: 100vh !important;
      height: auto !important;
      overflow: clip !important;
      color: #fff !important;
      background: #08090F !important;
      padding: 0 !important;
    }

    :where(html.home-page) .steps-scanner::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 18% 18%, rgba(56,106,187,.16), transparent 34%),
        radial-gradient(circle at 72% 48%, rgba(0,229,255,.06), transparent 32%);
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      position: sticky !important;
      top: 0 !important;
      z-index: 1;
      min-height: 100vh !important;
      height: 100vh !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(40px, 6vw, 108px);
      align-items: center;
      width: min(var(--grid-max), calc(100vw - var(--grid-margin) * 2));
      margin: 0 auto;
      padding: clamp(88px, 9vw, 132px) 0;
      background: transparent !important;
      border-radius: 0 !important;
      transform: none !important;
      box-sizing: border-box;
    }

    :where(html.home-page) .steps-scanner .steps-sticky::before,
    :where(html.home-page) .steps-scanner .steps-sticky::after,
    :where(html.home-page) .steps-scanner .steps-light-fader,
    :where(html.home-page) .steps-scanner .steps-particles,
    :where(html.home-page) .steps-scanner .steps-label,
    :where(html.home-page) .steps-scanner .steps-bottom-wave,
    :where(html.home-page) .steps-scanner .steps-bottom-progress {
      display: none !important;
    }

    :where(html.home-page) .steps-heading-zone {
      position: relative;
      z-index: 2;
      align-self: center;
    }

    :where(html.home-page) .steps-kicker {
      margin: 0 0 22px;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.38);
    }

    :where(html.home-page) .steps-heading-zone h2 {
      margin: 0;
      font-family: "Manrope", var(--font-sans);
      font-size: clamp(5.6rem, 13vw, 15rem);
      line-height: .82;
      letter-spacing: -.07em;
      text-transform: uppercase;
      font-weight: 800;
      color: #fff;
    }

    :where(html.home-page) .steps-scanner .steps-stage {
      position: relative !important;
      z-index: 2;
      height: 100% !important;
      min-height: 0 !important;
      overflow: visible !important;
      display: flex !important;
      align-items: center;
      padding: 0 !important;
      transform: none !important;
    }

    :where(html.home-page) .steps-scanner .steps-track {
      --steps-y: 0px;
      display: flex !important;
      flex-direction: column;
      width: 100%;
      gap: 0;
      transform: translate3d(0, var(--steps-y), 0);
      transition: none !important;
      will-change: transform;
    }

    :where(html.home-page) .steps-scanner .step {
      position: relative !important;
      inset: auto !important;
      min-height: 190px !important;
      height: auto !important;
      width: 100% !important;
      padding: 34px 0 38px !important;
      border-top: 1px solid #161722;
      display: block !important;
      opacity: .25 !important;
      filter: none !important;
      transform: none !important;
      color: #fff;
      transition: opacity .36s var(--ease-aww), color .36s var(--ease-aww) !important;
    }

    :where(html.home-page) .steps-scanner .step:last-child {
      border-bottom: 1px solid #161722;
    }

    :where(html.home-page) .steps-scanner .step::before,
    :where(html.home-page) .steps-scanner .step::after,
    :where(html.home-page) .steps-scanner .step-left-line,
    :where(html.home-page) .steps-scanner .step-visual,
    :where(html.home-page) .steps-scanner .step-icon {
      content: none !important;
      display: none !important;
    }

    :where(html.home-page) .steps-scanner .step-wrap,
    :where(html.home-page) .steps-scanner .step-cluster,
    :where(html.home-page) .steps-scanner .step-copy {
      display: contents !important;
    }

    :where(html.home-page) .steps-scanner .step-marker,
    :where(html.home-page) .steps-scanner .step-copy > span {
      display: block !important;
      margin-bottom: 14px;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace;
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.36) !important;
      transition: color .36s var(--ease-aww);
    }

    :where(html.home-page) .steps-scanner .step h3 {
      margin: 0 0 16px !important;
      max-width: none !important;
      color: #fff !important;
      font-size: clamp(28px, 2.1vw, 36px) !important;
      line-height: 1.05 !important;
      letter-spacing: -.04em !important;
      font-weight: 700 !important;
    }

    :where(html.home-page) .steps-scanner .step p {
      margin: 0 !important;
      max-width: 620px !important;
      color: rgba(255,255,255,.62) !important;
      font-size: clamp(16px, 1.05vw, 19px) !important;
      line-height: 1.5 !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible {
      opacity: 1 !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible .step-marker,
    :where(html.home-page) .steps-scanner .step.is-step-visible .step-copy > span {
      color: #00E5FF !important;
    }

    :where(html.home-page) .steps-scanline {
      position: absolute;
      z-index: 1;
      left: 50%;
      right: 0;
      top: 50%;
      height: 1px;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(0,229,255,0), rgba(0,229,255,.78), rgba(0,229,255,0));
      box-shadow: 0 0 22px rgba(0,229,255,.38);
      opacity: .58;
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .projects {
        background: #08090F !important;
      }

      :where(html.home-page) .projects-title {
        position: static !important;
        width: auto !important;
        margin-bottom: 42px !important;
      }

      :where(html.home-page) .projects-track {
        padding-top: 0 !important;
      }

      :where(html.home-page) .project {
        max-height: none !important;
      }

      :where(html.home-page) .steps-scanner {
        min-height: auto !important;
        padding: 88px var(--grid-margin) 96px !important;
      }

      :where(html.home-page) .steps-scanner .steps-sticky {
        position: relative !important;
        top: auto !important;
        width: 100%;
        min-height: auto !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 44px;
        padding: 0 !important;
      }

      :where(html.home-page) .steps-heading-zone h2 {
        font-size: clamp(4rem, 20vw, 7rem);
      }

      :where(html.home-page) .steps-scanner .steps-stage {
        display: block !important;
      }

      :where(html.home-page) .steps-scanner .steps-track {
        transform: none !important;
      }

      :where(html.home-page) .steps-scanner .step {
        opacity: 1 !important;
        min-height: 0 !important;
      }

      :where(html.home-page) .steps-scanline {
        display: none !important;
      }
    }

    /* Patch: visible projects, white services, strict steps */
    

    :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
      background: #FFFFFF !important;
      border-color: rgba(0,0,0,.08) !important;
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services .service-card:hover {
        background: #0D0D0D !important;
        color: #FFFFFF !important;
        border-color: rgba(0,0,0,.08) !important;
      }
    }

    :where(html.home-page) .projects-title {
      top: clamp(74px, 8vh, 104px) !important;
      font-size: clamp(3rem, 6vw, 6.5rem) !important;
      line-height: .88 !important;
      max-width: calc(100vw - var(--grid-margin) * 2) !important;
      white-space: nowrap;
    }

    :where(html.home-page) .projects-track {
      padding-top: 0 !important;
      align-items: center !important;
    }

    :where(html.home-page) .project {
      height: clamp(360px, 48vh, 500px) !important;
      min-height: 360px !important;
      max-height: 500px !important;
    }

    :where(html.home-page) .projects-progress {
      display: none !important;
    }

    :where(html.home-page) .steps-scanner {
      background: #08090F !important;
    }

    :where(html.home-page) .steps-scanner::before {
      display: none !important;
      content: none !important;
      background: none !important;
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      width: 100vw !important;
      grid-template-columns: 50% 50% !important;
      gap: 0 !important;
      padding: 0 !important;
    }

    :where(html.home-page) .steps-heading-zone {
      padding-left: var(--grid-margin);
      padding-right: 40px;
    }

    :where(html.home-page) .steps-heading-zone h2 {
      font-size: clamp(3rem, 6vw, 7rem) !important;
      letter-spacing: -.04em !important;
    }

    :where(html.home-page) .steps-scanner .steps-stage {
      padding-right: var(--grid-margin) !important;
    }

    :where(html.home-page) .steps-scanner .step {
      min-height: 210px !important;
      padding: 38px 0 42px !important;
    }

    @media (max-width: 1024px) {
      

      :where(html.home-page) .projects-title {
        white-space: normal;
      }

      :where(html.home-page) .steps-scanner .steps-sticky {
        width: 100% !important;
        grid-template-columns: 1fr !important;
      }

      :where(html.home-page) .steps-heading-zone {
        padding: 0 !important;
      }

      :where(html.home-page) .steps-scanner .steps-stage {
        padding-right: 0 !important;
      }
    }

    /* Recovery pass: restore tunnel scroll, fix projects viewport, fix vertical steps scanner */
    :where(html.home-page) .projects {
      display: block !important;
      min-height: 100vh !important;
      background: #08090F !important;
    }

    :where(html.home-page) .projects-title {
      position: absolute !important;
      top: clamp(78px, 8vh, 112px) !important;
      left: var(--grid-margin) !important;
      z-index: 4 !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: clamp(3rem, 5.4vw, 6rem) !important;
      line-height: .86 !important;
      pointer-events: none;
    }

    :where(html.home-page) .projects-track {
      position: sticky !important;
      top: 0 !important;
      height: 100vh !important;
      display: flex !important;
      align-items: center !important;
      gap: 36px !important;
      margin: 0 !important;
      padding: clamp(120px, 15vh, 158px) var(--grid-margin) 48px !important;
      box-sizing: border-box !important;
      transform: translate3d(var(--projects-x, 0px), 0, 0);
    }

    :where(html.home-page) .project {
      flex: 0 0 min(1080px, calc(100vw - var(--grid-margin) * 2)) !important;
      height: clamp(360px, 48vh, 500px) !important;
      min-height: 360px !important;
      max-height: 500px !important;
      margin: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(300px, .42fr) minmax(0, .58fr) !important;
      align-items: stretch !important;
    }

    :where(html.home-page) .project figure {
      height: 100% !important;
      min-height: 0 !important;
    }

    :where(html.home-page) .projects-progress {
      display: none !important;
    }

    :where(html.home-page) .steps-scanner {
      min-height: 100vh !important;
      background: #08090F !important;
      overflow: clip !important;
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      position: sticky !important;
      top: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      min-height: 100vh !important;
      display: grid !important;
      grid-template-columns: 50% 50% !important;
      gap: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      background: #08090F !important;
    }

    :where(html.home-page) .steps-heading-zone {
      align-self: center !important;
      padding-left: var(--grid-margin) !important;
      padding-right: 40px !important;
    }

    :where(html.home-page) .steps-heading-zone h2 {
      font-size: clamp(3rem, 6vw, 7rem) !important;
      letter-spacing: -.04em !important;
    }

    :where(html.home-page) .steps-scanner .steps-stage {
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: center !important;
      padding-right: var(--grid-margin) !important;
    }

    :where(html.home-page) .steps-scanner .steps-track {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      transform: translate3d(0, var(--steps-y, 0px), 0);
      will-change: transform !important;
    }

    :where(html.home-page) .steps-scanner .step {
      min-height: 34vh !important;
      padding: 28px 0 32px !important;
      opacity: .25 !important;
      border-top: 1px solid #161722 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible {
      opacity: 1 !important;
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .projects {
        padding: 86px var(--grid-margin) 96px !important;
      }

      :where(html.home-page) .projects-track {
        position: relative !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        transform: none !important;
      }

      :where(html.home-page) .project {
        flex: none !important;
        height: auto !important;
        max-height: none !important;
      }

      :where(html.home-page) .steps-scanner {
        padding: 88px var(--grid-margin) 96px !important;
      }

      :where(html.home-page) .steps-scanner .steps-sticky {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        grid-template-columns: 1fr !important;
        gap: 44px !important;
        overflow: visible !important;
      }

      :where(html.home-page) .steps-scanner .steps-stage {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        padding-right: 0 !important;
      }

      :where(html.home-page) .steps-scanner .steps-track {
        transform: none !important;
      }

      :where(html.home-page) .steps-scanner .step {
        opacity: 1 !important;
        min-height: 0 !important;
      }
    }

    /* Final stabilization: hero tunnel, projects viewport, vertical steps scanner */
    

    

    :where(html.home-page) .projects {
      min-height: 100vh !important;
      padding: 0 !important;
      background: #08090F !important;
      overflow: clip !important;
    }

    :where(html.home-page) .projects-title {
      top: clamp(64px, 7vh, 92px) !important;
      font-size: clamp(2.8rem, 4.8vw, 5.4rem) !important;
      line-height: .86 !important;
    }

    :where(html.home-page) .projects-track {
      top: 0 !important;
      height: 100vh !important;
      padding: clamp(82px, 10vh, 112px) var(--grid-margin) 34px !important;
      align-items: center !important;
      gap: 32px !important;
    }

    :where(html.home-page) .project {
      height: clamp(320px, 44vh, 455px) !important;
      min-height: 320px !important;
      max-height: 455px !important;
    }

    :where(html.home-page) .project-copy {
      padding: clamp(24px, 2.8vw, 42px) !important;
    }

    :where(html.home-page) .project-copy h3 {
      font-size: clamp(2.3rem, 4.2vw, 5.1rem) !important;
      line-height: .88 !important;
    }

    :where(html.home-page) .projects-progress {
      display: none !important;
    }

    :where(html.home-page) .steps-scanner {
      height: 334vh !important;
      min-height: 100vh !important;
      padding: 0 !important;
      background: #08090F !important;
      overflow: clip !important;
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      position: sticky !important;
      top: 0 !important;
      height: 100vh !important;
      min-height: 100vh !important;
      display: grid !important;
      grid-template-columns: 50% 50% !important;
      gap: 0 !important;
      overflow: hidden !important;
      background: #08090F !important;
    }

    :where(html.home-page) .steps-scanner .steps-stage {
      display: block !important;
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      padding: clamp(72px, 10vh, 118px) var(--grid-margin) clamp(54px, 8vh, 86px) 0 !important;
      box-sizing: border-box !important;
    }

    :where(html.home-page) .steps-scanner .steps-track {
      display: flex !important;
      flex-direction: column !important;
      min-height: calc(100vh + 68vh) !important;
      transform: translate3d(0, var(--steps-y, 0px), 0);
      will-change: transform !important;
    }

    :where(html.home-page) .steps-scanner .step {
      min-height: 42vh !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      padding: 34px 0 42px !important;
      opacity: .25 !important;
      border-top: 1px solid #161722 !important;
      background: transparent !important;
      box-shadow: none !important;
      transition: opacity .34s cubic-bezier(.25, 1, .5, 1) !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible {
      opacity: 1 !important;
    }

    :where(html.home-page) .steps-scanner .step h3,
    :where(html.home-page) .steps-scanner .step p,
    :where(html.home-page) .steps-scanner .step-marker {
      transform: none !important;
    }

    @media (max-width: 1024px) {
      

      :where(html.home-page) .projects {
        padding: 84px var(--grid-margin) 96px !important;
        overflow: visible !important;
      }

      :where(html.home-page) .projects-title {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 32px !important;
      }

      :where(html.home-page) .projects-track {
        position: relative !important;
        height: auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        transform: none !important;
      }

      :where(html.home-page) .project {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
      }

      :where(html.home-page) .steps-scanner {
        height: auto !important;
        padding: 88px var(--grid-margin) 96px !important;
        overflow: visible !important;
      }

      :where(html.home-page) .steps-scanner .steps-sticky {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        overflow: visible !important;
      }

      :where(html.home-page) .steps-scanner .steps-stage {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
      }

      :where(html.home-page) .steps-scanner .steps-track {
        min-height: 0 !important;
        transform: none !important;
      }

      :where(html.home-page) .steps-scanner .step {
        min-height: 0 !important;
        opacity: 1 !important;
      }
    }

    /* Editorial projects: white borderless portfolio grid */
    :where(html.home-page) .projects-editorial {
      height: auto !important;
      min-height: auto !important;
      padding: clamp(110px, 12vw, 170px) var(--grid-margin) clamp(120px, 13vw, 190px) !important;
      background: #FFFFFF !important;
      color: #0F1015 !important;
      overflow: visible !important;
    }

    :where(html.home-page) .projects-editorial .projects-title {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      margin: 0 0 clamp(56px, 7vw, 96px) !important;
      max-width: min(980px, 100%) !important;
      color: #0F1015 !important;
      font-size: clamp(3rem, 7vw, 7.6rem) !important;
      line-height: .86 !important;
      letter-spacing: -.055em !important;
      pointer-events: auto !important;
    }

    :where(html.home-page) .projects-editorial .projects-track {
      position: relative !important;
      top: auto !important;
      height: auto !important;
      width: 100% !important;
      display: grid !important;
      grid-template-columns: 1.55fr .85fr !important;
      align-items: stretch !important;
      gap: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      transform: none !important;
      border-top: 1px solid rgba(15,16,21,.1) !important;
      border-left: 1px solid rgba(15,16,21,.1) !important;
    }

    :where(html.home-page) .projects-editorial .project {
      position: relative !important;
      display: grid !important;
      grid-template-rows: auto 1fr !important;
      min-height: clamp(520px, 64vh, 740px) !important;
      height: auto !important;
      max-height: none !important;
      min-width: 0 !important;
      width: auto !important;
      flex: none !important;
      margin: 0 !important;
      padding: clamp(26px, 3vw, 46px) !important;
      color: #0F1015 !important;
      text-decoration: none !important;
      background: transparent !important;
      border: 0 !important;
      border-right: 1px solid rgba(15,16,21,.1) !important;
      border-bottom: 1px solid rgba(15,16,21,.1) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
      cursor: none;
    }

    :where(html.home-page) .projects-editorial .project:nth-child(3) {
      grid-column: span 1;
    }

    :where(html.home-page) .projects-editorial .project:nth-child(4) {
      grid-column: span 1;
    }

    :where(html.home-page) .projects-editorial .project-copy {
      display: grid !important;
      gap: 20px !important;
      padding: 0 !important;
      color: inherit !important;
      background: transparent !important;
      border: 0 !important;
    }

    :where(html.home-page) .projects-editorial .project-copy h3 {
      margin: 0 !important;
      max-width: 100% !important;
      color: #0F1015 !important;
      font-size: clamp(48px, 5vw, 78px) !important;
      line-height: .88 !important;
      letter-spacing: -.055em !important;
      text-transform: uppercase !important;
      overflow-wrap: anywhere;
    }

    :where(html.home-page) .projects-editorial .project .eyebrow {
      margin: 0 !important;
      color: rgba(15,16,21,.54) !important;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace !important;
      font-size: 12px !important;
      line-height: 1.45 !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .projects-editorial .project .tags {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      margin: 0 0 clamp(24px, 3vw, 42px) !important;
      padding: 0 !important;
      list-style: none !important;
    }

    :where(html.home-page) .projects-editorial .project .tags li {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 28px !important;
      padding: 0 10px !important;
      border: 1px solid rgba(15,16,21,.18) !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: rgba(15,16,21,.68) !important;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace !important;
      font-size: 11px !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .projects-editorial .project figure {
      align-self: end !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      aspect-ratio: 16 / 9 !important;
      margin: 0 !important;
      overflow: hidden !important;
      border-radius: 0 !important;
      background: #F3F5F8 !important;
      box-shadow: none !important;
      filter: grayscale(.86) contrast(.92) brightness(.94);
      transition: filter .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .projects-editorial .project img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      transform: scale(1.005) !important;
      transition: transform .9s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .projects-editorial .project:hover figure {
      filter: grayscale(0) contrast(1) brightness(1);
      transform: translateY(-4px);
    }

    :where(html.home-page) .projects-editorial .project:hover img {
      transform: scale(1.05) !important;
    }

    :where(html.home-page) .projects-editorial .project-view-cursor {
      mix-blend-mode: normal;
    }

    :where(html.home-page) .projects-editorial .projects-progress,
    :where(html.home-page) .projects-editorial .case-link,
    :where(html.home-page) .projects-editorial .button.case-link {
      display: none !important;
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .projects-editorial {
        padding: 88px var(--grid-margin) 104px !important;
      }

      :where(html.home-page) .projects-editorial .projects-track {
        grid-template-columns: 1fr !important;
        border-left: 0 !important;
      }

      :where(html.home-page) .projects-editorial .project {
        min-height: 0 !important;
        padding: 30px 0 !important;
        cursor: pointer;
        border-right: 0 !important;
      }

      :where(html.home-page) .projects-editorial .project-copy h3 {
        font-size: clamp(38px, 12vw, 58px) !important;
      }

      :where(html.home-page) .projects-editorial .project figure {
        filter: none !important;
      }
    }

    /* About: keep the manifesto higher in the viewport */
    

    

    /* Projects runway: white horizontal podium */
    :where(html.home-page) .projects-runway {
      height: auto !important;
      min-height: 100vh !important;
      padding: 0 !important;
      background: #FFFFFF !important;
      color: #0F1015 !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .projects-runway .bg-trigger {
      display: none !important;
    }

    :where(html.home-page) .projects-runway .projects-title {
      position: absolute !important;
      z-index: 4 !important;
      top: clamp(38px, 5.4vh, 62px) !important;
      left: var(--grid-margin) !important;
      margin: 0 !important;
      width: auto !important;
      max-width: 42vw !important;
      color: #0F1015 !important;
      font-size: clamp(28px, 2.2vw, 42px) !important;
      line-height: .92 !important;
      letter-spacing: -.04em !important;
      text-transform: uppercase !important;
      pointer-events: none !important;
    }

    :where(html.home-page) .projects-runway .projects-track {
      position: relative !important;
      top: auto !important;
      width: max-content !important;
      height: 100vh !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 12vw !important;
      padding: 0 15vw 0 var(--grid-margin) !important;
      margin: 0 !important;
      border: 0 !important;
      background: #FFFFFF !important;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }

    :where(html.home-page) .projects-runway .project {
      position: relative !important;
      flex: 0 0 70vw !important;
      width: 70vw !important;
      height: 100vh !important;
      min-height: 640px !important;
      max-height: none !important;
      display: grid !important;
      grid-template-columns: minmax(0, .56fr) minmax(320px, .44fr) !important;
      grid-template-rows: 1fr !important;
      align-items: center !important;
      gap: clamp(36px, 5vw, 86px) !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      color: #0F1015 !important;
      overflow: visible !important;
      text-decoration: none !important;
      cursor: none;
    }

    :where(html.home-page) .projects-runway .project-copy {
      position: relative !important;
      z-index: 2 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: clamp(18px, 2vw, 28px) !important;
      padding: 0 !important;
      background: transparent !important;
    }

    :where(html.home-page) .projects-runway .project-copy h3 {
      margin: 0 !important;
      max-width: none !important;
      color: transparent !important;
      -webkit-text-stroke: 1.5px #0F1015;
      text-stroke: 1.5px #0F1015;
      font-size: clamp(92px, 11vw, 150px) !important;
      line-height: .78 !important;
      letter-spacing: -.07em !important;
      text-transform: uppercase !important;
      transition: color .65s cubic-bezier(.16, 1, .3, 1), -webkit-text-stroke-color .65s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .projects-runway .project.is-runway-active .project-copy h3,
    :where(html.home-page) .projects-runway .project:hover .project-copy h3 {
      color: #0F1015 !important;
      -webkit-text-stroke-color: #0F1015;
      text-stroke-color: #0F1015;
    }

    :where(html.home-page) .projects-runway .project .eyebrow {
      order: 2;
      margin: 0 !important;
      color: rgba(15,16,21,.66) !important;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace !important;
      font-size: clamp(12px, .86vw, 14px) !important;
      line-height: 1.5 !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .projects-runway .project .tags {
      order: 3;
      display: flex !important;
      gap: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      color: #0F1015 !important;
      font-family: "Roboto Mono", "IBM Plex Mono", ui-monospace, monospace !important;
      font-size: clamp(12px, .86vw, 14px) !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .projects-runway .project .tags li {
      min-height: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: rgba(15,16,21,.72) !important;
    }

    :where(html.home-page) .projects-runway .project .tags li + li::before {
      content: "•";
      display: inline-block;
      margin: 0 12px;
      color: #0F1015;
      font-weight: 800;
    }

    :where(html.home-page) .projects-runway .project figure {
      position: relative !important;
      z-index: 1 !important;
      width: min(36vw, 520px) !important;
      height: min(62vh, 620px) !important;
      min-height: 420px !important;
      aspect-ratio: auto !important;
      align-self: center !important;
      justify-self: end !important;
      margin: 0 !important;
      border-radius: 0 !important;
      overflow: hidden !important;
      background: #F2F4F7 !important;
      filter: grayscale(1) contrast(.95) brightness(.96);
      transform: translate3d(var(--runway-media-x, 0px), 0, 0) !important;
      transition: filter .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .projects-runway .project:nth-child(even) {
      grid-template-columns: minmax(320px, .44fr) minmax(0, .56fr) !important;
    }

    :where(html.home-page) .projects-runway .project:nth-child(even) .project-copy {
      grid-column: 2;
    }

    :where(html.home-page) .projects-runway .project:nth-child(even) figure {
      grid-column: 1;
      grid-row: 1;
      justify-self: start !important;
    }

    :where(html.home-page) .projects-runway .project img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      transform: scale(1.03) !important;
      transition: transform .9s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .projects-runway .project:hover figure {
      filter: grayscale(0) contrast(1) brightness(1);
    }

    :where(html.home-page) .projects-runway .project:hover img {
      transform: scale(1.08) !important;
    }

    :where(html.home-page) .projects-runway .projects-progress,
    :where(html.home-page) .projects-runway .case-link,
    :where(html.home-page) .projects-runway .button.case-link {
      display: none !important;
    }

    :where(html.home-page) .projects-runway .project-view-cursor {
      background: rgba(0,102,255,.92) !important;
      color: #FFFFFF !important;
      border-color: rgba(0,102,255,.5) !important;
      box-shadow: 0 0 44px rgba(0,102,255,.34) !important;
      mix-blend-mode: normal !important;
    }

    @media (max-width: 1024px) {
      

      :where(html.home-page) .projects-runway {
        padding: 86px var(--grid-margin) 104px !important;
        overflow: visible !important;
      }

      :where(html.home-page) .projects-runway .projects-title {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        max-width: none !important;
        margin-bottom: 36px !important;
        font-size: clamp(38px, 12vw, 64px) !important;
      }

      :where(html.home-page) .projects-runway .projects-track {
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 64px !important;
        padding: 0 !important;
        transform: none !important;
      }

      :where(html.home-page) .projects-runway .project,
    :where(html.home-page) .projects-runway .project:nth-child(even) {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 26px !important;
        cursor: pointer;
      }

      :where(html.home-page) .projects-runway .project:nth-child(even) .project-copy,
    :where(html.home-page) .projects-runway .project:nth-child(even) figure {
        grid-column: auto;
        grid-row: auto;
      }

      :where(html.home-page) .projects-runway .project-copy h3 {
        color: #0F1015 !important;
        -webkit-text-stroke: 0 transparent;
        text-stroke: 0 transparent;
        font-size: clamp(44px, 15vw, 72px) !important;
      }

      :where(html.home-page) .projects-runway .project figure {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 3 !important;
        filter: none !important;
        transform: none !important;
      }
    }

    /* Final 2026-07-02: sci-fi hero, runway projects, animated steps recovery */
    

    :where(html.home-page) .brand-mark {
      color: #fff !important;
    }

    

    

    

    

    

    

    

    

    

    

    

    

    :where(html.home-page) .projects-runway {
      height: 100vh !important;
      min-height: 100vh !important;
      background: #FFFFFF !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .projects-runway .projects-track {
      width: max-content !important;
      height: 100vh !important;
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: center !important;
      gap: 10vw !important;
      padding: 0 18vw 0 var(--grid-margin) !important;
      border: 0 !important;
      background: transparent !important;
      transform: translate3d(0,0,0);
    }

    :where(html.home-page) .projects-runway .project {
      flex: 0 0 78vw !important;
      width: 78vw !important;
      height: 100vh !important;
      min-height: 680px !important;
      display: grid !important;
      grid-template-columns: minmax(0, .58fr) minmax(300px, .42fr) !important;
      align-items: center !important;
      gap: clamp(30px, 4vw, 70px) !important;
      overflow: visible !important;
    }

    :where(html.home-page) .projects-runway .project-copy h3 {
      font-size: clamp(92px, 10vw, 142px) !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    :where(html.home-page) .projects-runway .project figure {
      width: min(34vw, 500px) !important;
      height: min(58vh, 570px) !important;
      min-height: 380px !important;
    }

    :where(html.home-page) .steps-scanner .step {
      display: grid !important;
      grid-template-columns: 176px minmax(0, 1fr) !important;
      column-gap: 34px !important;
      align-items: center !important;
      justify-content: initial !important;
    }

    :where(html.home-page) .steps-scanner .step-visual {
      display: grid !important;
      grid-row: 1 / span 3;
      place-items: center;
      width: 156px !important;
      height: 156px !important;
      border-radius: 8px !important;
      background: #17181f !important;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow: none !important;
    }

    :where(html.home-page) .steps-scanner .step-visual canvas {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
    }

    :where(html.home-page) .steps-scanner .step-marker,
    :where(html.home-page) .steps-scanner .step h3,
    :where(html.home-page) .steps-scanner .step p {
      grid-column: 2 !important;
    }

    @media (max-width: 1024px) {
      

      

      :where(html.home-page) .projects-runway {
        height: auto !important;
        min-height: 0 !important;
      }

      :where(html.home-page) .projects-runway .projects-track {
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 64px !important;
        padding: 0 !important;
      }

      :where(html.home-page) .projects-runway .project {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        grid-template-columns: 1fr !important;
      }

      :where(html.home-page) .steps-scanner .step {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        column-gap: 20px !important;
      }

      :where(html.home-page) .steps-scanner .step-visual {
        width: 96px !important;
        height: 96px !important;
      }
    }

    /* Final recovery: restore previous hero, reliable runway, visible steps timeline */
    

    

    

    

    

    

    

    

    

    

    

    

    

    :where(html.home-page) .projects-runway {
      position: relative !important;
      min-height: 100vh !important;
      height: var(--runway-height, auto) !important;
      padding: 0 !important;
      overflow: visible !important;
      background: #FFFFFF !important;
    }

    :where(html.home-page) .projects-runway .projects-track {
      position: sticky !important;
      top: 0 !important;
      left: 0 !important;
      width: max-content !important;
      max-width: none !important;
      height: 100vh !important;
      overflow: visible !important;
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: center !important;
      gap: 0 !important;
      padding: 0 !important;
      will-change: transform !important;
    }

    :where(html.home-page) .projects-runway .project {
      flex: 0 0 100vw !important;
      width: 100vw !important;
      padding-left: var(--grid-margin) !important;
      padding-right: var(--grid-margin) !important;
    }

    :where(html.home-page) .projects-runway .project figure {
      width: min(42vw, 620px) !important;
      justify-self: end !important;
    }

    :where(html.home-page) .steps-scanner .steps-bottom-progress {
      display: grid !important;
      position: absolute !important;
      z-index: 8 !important;
      left: var(--grid-margin) !important;
      right: var(--grid-margin) !important;
      bottom: 34px !important;
      grid-template-columns: auto minmax(220px, 420px) !important;
      gap: 24px !important;
      align-items: center !important;
      color: rgba(94,142,224,.78) !important;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: none !important;
    }

    :where(html.home-page) .steps-scanner .steps-progress-dots {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
    }

    @media (max-width: 1024px) {
      

      :where(html.home-page) .projects-runway,
    :where(html.home-page) .projects-runway .projects-track {
        height: auto !important;
        position: relative !important;
        top: auto !important;
      }

      :where(html.home-page) .steps-scanner .steps-bottom-progress {
        display: none !important;
      }
    }

    /* Restore pass: bring the main site back to the stable AXIO version. */
    html:where(.home-page),
    :where(html.home-page) body {
      max-width: 100%;
      overflow-x: hidden !important;
    }

    

    

    

    

    

    

    

    :where(html.home-page) .projects-runway {
      height: var(--runway-height, auto) !important;
      min-height: 100vh !important;
      padding: 0 !important;
      background: #FFFFFF !important;
      overflow: visible !important;
    }

    :where(html.home-page) .projects-runway .projects-title {
      position: absolute !important;
      z-index: 3 !important;
      top: clamp(82px, 11vh, 130px) !important;
      left: var(--grid-margin) !important;
      margin: 0 !important;
      color: #0F1015 !important;
      font-size: clamp(44px, 6vw, 104px) !important;
      line-height: .9 !important;
      pointer-events: none !important;
    }

    :where(html.home-page) .projects-runway .projects-track {
      position: sticky !important;
      top: 0 !important;
      width: max-content !important;
      height: 100vh !important;
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: stretch !important;
      gap: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
      transform: translate3d(var(--projects-x, 0px), 0, 0);
    }

    :where(html.home-page) .projects-runway .project,
    :where(html.home-page) .projects-runway .project:nth-child(even) {
      flex: 0 0 100vw !important;
      width: 100vw !important;
      max-width: 100vw !important;
      height: 100vh !important;
      min-height: 720px !important;
      display: grid !important;
      grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr) !important;
      align-items: center !important;
      gap: clamp(32px, 5vw, 84px) !important;
      padding: clamp(150px, 18vh, 220px) var(--grid-margin) clamp(62px, 8vh, 96px) !important;
      color: #0F1015 !important;
      text-decoration: none !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .projects-runway .project-copy,
    :where(html.home-page) .projects-runway .project:nth-child(even) .project-copy {
      grid-column: 1 !important;
      grid-row: 1 !important;
      position: relative !important;
      z-index: 2 !important;
      display: grid !important;
      gap: 18px !important;
      align-content: center !important;
      order: initial !important;
    }

    :where(html.home-page) .projects-runway .project-copy h3 {
      margin: 0 !important;
      max-width: 8.5em !important;
      color: #0F1015 !important;
      -webkit-text-stroke: 0 transparent !important;
      font-size: clamp(54px, 6.4vw, 112px) !important;
      line-height: .92 !important;
      letter-spacing: -.065em !important;
      text-transform: none !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    :where(html.home-page) .projects-runway .project .eyebrow,
    :where(html.home-page) .projects-runway .project .tags {
      color: rgba(15,16,21,.58) !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .projects-runway .project figure,
    :where(html.home-page) .projects-runway .project:nth-child(even) figure {
      grid-column: 2 !important;
      grid-row: 1 !important;
      width: 100% !important;
      max-width: 760px !important;
      height: clamp(330px, 52vh, 590px) !important;
      justify-self: end !important;
      margin: 0 !important;
      border-radius: 0 !important;
      filter: none !important;
      box-shadow: none !important;
      transform: translate3d(var(--runway-media-x, 0px), 0, 0) !important;
    }

    :where(html.home-page) .projects-runway .project img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      filter: none !important;
      opacity: 1 !important;
    }

    :where(html.home-page) .projects-runway .projects-progress,
    :where(html.home-page) .projects-runway .case-link,
    :where(html.home-page) .projects-runway .button.case-link {
      display: none !important;
    }

    :where(html.home-page) .steps-scanner .step h3 {
      margin: 0 !important;
    }

    :where(html.home-page) .steps-scanner .step p {
      margin-top: 0 !important;
    }

    :where(html.home-page) .steps-scanner .step-visual,
    :where(html.home-page) .steps-scanner .step-visual canvas {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    :where(html.home-page) .steps-scanner .steps-stage {
      display: block !important;
      height: 100vh !important;
      overflow: hidden !important;
      padding-right: var(--grid-margin) !important;
    }

    :where(html.home-page) .steps-scanner {
      height: 400vh !important;
      min-height: 400vh !important;
      overflow: visible !important;
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      position: sticky !important;
      top: 0 !important;
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .steps-scanner .steps-track {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      min-height: 100vh !important;
      height: auto !important;
      align-items: stretch !important;
      transform: translate3d(0, var(--steps-y, 0px), 0);
    }

    :where(html.home-page) .steps-scanner .step {
      flex: 0 0 100vh !important;
      width: 100% !important;
      min-height: 100vh !important;
      height: 100vh !important;
      display: grid !important;
      grid-template-columns: minmax(168px, 240px) minmax(320px, 520px) !important;
      grid-template-rows: auto auto 30px auto !important;
      align-content: center !important;
      align-items: start !important;
      justify-content: start !important;
      column-gap: 36px !important;
      row-gap: 0 !important;
      padding: 0 !important;
      opacity: .28 !important;
      border: 0 !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible {
      opacity: 1 !important;
    }

    :where(html.home-page) .steps-scanner .step-visual {
      grid-column: 1 !important;
      grid-row: 1 / span 4 !important;
      width: 180px !important;
      height: 180px !important;
      align-self: center !important;
      justify-self: end !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 8px !important;
      background: #17181f !important;
      border: 1px solid rgba(255,255,255,.06) !important;
    }

    :where(html.home-page) .steps-scanner .steps-bottom-progress {
      display: grid !important;
    }

    :where(html.home-page) .steps-scanner .step-marker {
      grid-column: 2 !important;
      grid-row: 1 !important;
      margin: 0 0 22px !important;
      align-self: end !important;
    }

    :where(html.home-page) .steps-scanner .step h3 {
      grid-column: 2 !important;
      grid-row: 2 !important;
      align-self: end !important;
    }

    :where(html.home-page) .steps-scanner .step p {
      grid-column: 2 !important;
      grid-row: 4 !important;
      align-self: start !important;
      max-width: 430px !important;
      transform: none !important;
    }

    :where(html.home-page) .contact {
      display: block !important;
      min-height: 780px !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .contact::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 12% 18%, rgba(116,171,255,.9) 0 2px, transparent 3px),
        radial-gradient(circle at 24% 72%, rgba(56,106,187,.64) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 30%, rgba(116,171,255,.55) 0 1px, transparent 2px),
        radial-gradient(circle at 72% 22%, rgba(116,171,255,.74) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 68%, rgba(56,106,187,.82) 0 2px, transparent 3px);
      background-size: 460px 360px, 520px 420px, 380px 310px, 610px 470px, 430px 380px;
      animation: axiosFooterParticles 24s linear infinite;
      opacity: .58;
    }

    :where(html.home-page) .contact-intro {
      position: relative;
      z-index: 1;
      max-width: 1060px;
    }

    @keyframes axiosFooterParticles {
      from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
      to { background-position: 0 280px, 0 340px, 0 240px, 0 380px, 0 300px; }
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .projects-runway {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 92px var(--grid-margin) 110px !important;
      }

      :where(html.home-page) .projects-runway .projects-title {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 34px !important;
      }

      :where(html.home-page) .projects-runway .projects-track {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        transform: none !important;
        display: grid !important;
        gap: 42px !important;
      }

      :where(html.home-page) .projects-runway .project,
    :where(html.home-page) .projects-runway .project:nth-child(even) {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 0 !important;
      }

      :where(html.home-page) .projects-runway .project figure,
    :where(html.home-page) .projects-runway .project:nth-child(even) figure {
        grid-column: 1 !important;
        height: auto !important;
        aspect-ratio: 1.25 !important;
        max-width: none !important;
      }
    }
    /* Emergency stable scroll layer: projects + process only */
    

    

    :where(html.home-page) .projects-runway {
      --projects-x: 0px;
      --projects-progress: 0%;
      position: relative !important;
      height: var(--projects-scroll-height, 220vh) !important;
      min-height: 180vh !important;
      padding: 0 !important;
      overflow: visible !important;
      background: var(--color--background) !important;
      color: #0f1015 !important;
      contain: layout style;
    }

    :where(html.home-page) .projects-runway .projects-title {
      position: absolute !important;
      z-index: 4 !important;
      top: clamp(78px, 10vh, 124px) !important;
      left: var(--grid-margin) !important;
      max-width: 9em !important;
      margin: 0 !important;
      padding: 0 !important;
      color: #0f1015 !important;
      font-size: clamp(42px, 5.7vw, 96px) !important;
      line-height: .92 !important;
      letter-spacing: -.06em !important;
      pointer-events: none !important;
    }

    :where(html.home-page) .projects-runway .projects-track {
      position: sticky !important;
      top: 0 !important;
      left: 0 !important;
      z-index: 2 !important;
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: center !important;
      gap: clamp(32px, 3.4vw, 56px) !important;
      width: max-content !important;
      max-width: none !important;
      height: 100vh !important;
      padding: 0 var(--grid-margin) !important;
      overflow: visible !important;
      transform: translate3d(var(--projects-x, 0px), 0, 0);
      will-change: transform !important;
    }

    :where(html.home-page) .projects-runway .project,
    :where(html.home-page) .projects-runway .project:nth-child(even) {
      flex: 0 0 min(92vw, 1320px) !important;
      width: min(92vw, 1320px) !important;
      max-width: min(92vw, 1320px) !important;
      height: min(74vh, 720px) !important;
      min-height: 560px !important;
      display: grid !important;
      grid-template-columns: minmax(320px, .42fr) minmax(440px, .58fr) !important;
      align-items: stretch !important;
      gap: clamp(28px, 4vw, 64px) !important;
      padding: clamp(30px, 3.2vw, 54px) !important;
      border: 1px solid rgba(56,106,187,.12) !important;
      border-radius: clamp(28px, 2.6vw, 40px) !important;
      background:
        linear-gradient(135deg, rgba(247,250,255,.98), rgba(255,255,255,.98)),
        radial-gradient(circle at 82% 20%, rgba(56,106,187,.12), transparent 38%) !important;
      box-shadow: 0 28px 90px rgba(24, 42, 78, .10) !important;
      color: #0f1015 !important;
      text-decoration: none !important;
      opacity: 1 !important;
      transform: none !important;
      overflow: hidden !important;
      pointer-events: auto !important;
    }

    :where(html.home-page) .projects-runway .project-copy,
    :where(html.home-page) .projects-runway .project:nth-child(even) .project-copy {
      grid-column: 1 !important;
      grid-row: 1 !important;
      z-index: 2 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      gap: 26px !important;
      padding: 0 !important;
      color: #0f1015 !important;
      opacity: 1 !important;
      transform: none !important;
    }

    :where(html.home-page) .projects-runway .project h3 {
      margin: 0 !important;
      color: #0f1015 !important;
      font-size: clamp(42px, 5vw, 88px) !important;
      line-height: .9 !important;
      letter-spacing: -.06em !important;
      font-weight: 800 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    :where(html.home-page) .projects-runway .project .eyebrow,
    :where(html.home-page) .projects-runway .project .tags {
      color: rgba(15,16,21,.56) !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .projects-runway .project .tags {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
    }

    :where(html.home-page) .projects-runway .project .tags li {
      min-height: 30px !important;
      display: inline-flex !important;
      align-items: center !important;
      padding: 0 10px !important;
      border: 1px solid rgba(15,16,21,.12) !important;
      border-radius: 999px !important;
      background: transparent !important;
      color: rgba(15,16,21,.58) !important;
      font-size: 11px !important;
    }

    :where(html.home-page) .projects-runway .project figure,
    :where(html.home-page) .projects-runway .project:nth-child(even) figure {
      grid-column: 2 !important;
      grid-row: 1 !important;
      width: 100% !important;
      max-width: none !important;
      height: 100% !important;
      min-height: 0 !important;
      align-self: stretch !important;
      justify-self: stretch !important;
      margin: 0 !important;
      border-radius: 24px !important;
      overflow: hidden !important;
      background: #eef3fb !important;
      box-shadow: none !important;
      transform: translate3d(var(--runway-media-x, 0px), 0, 0) !important;
    }

    :where(html.home-page) .projects-runway .project img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      opacity: 1 !important;
      filter: none !important;
      transform: scale(var(--case-image-scale, 1)) !important;
      transition: transform .85s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .projects-runway .project:hover img {
      transform: scale(1.035) !important;
    }

    :where(html.home-page) .projects-runway .projects-progress {
      position: sticky !important;
      z-index: 6 !important;
      bottom: 30px !important;
      left: var(--grid-margin) !important;
      width: calc(100vw - var(--grid-margin) * 2) !important;
      height: 1px !important;
      margin: -46px var(--grid-margin) 0 !important;
      display: block !important;
      background: rgba(15,16,21,.12) !important;
    }

    :where(html.home-page) .projects-runway .projects-progress span {
      display: block !important;
      width: var(--projects-progress, 0%) !important;
      height: 100% !important;
      background: #386ABB !important;
      box-shadow: none !important;
    }

    :where(html.home-page) .steps-scanner {
      --steps-progress: 0;
      --steps-y: 0px;
      position: relative !important;
      height: var(--steps-scroll-height, 165vh) !important;
      min-height: 150vh !important;
      padding: 0 !important;
      overflow: visible !important;
      background: #08090F !important;
      color: #ffffff !important;
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      position: sticky !important;
      top: 0 !important;
      z-index: 2 !important;
      height: 100vh !important;
      min-height: 100vh !important;
      display: grid !important;
      grid-template-columns: minmax(0, .48fr) minmax(0, .52fr) !important;
      overflow: hidden !important;
      background: #08090F !important;
    }

    :where(html.home-page) .steps-scanner .steps-heading-zone {
      position: relative !important;
      z-index: 2 !important;
      grid-column: 1 !important;
      align-self: center !important;
      padding-left: var(--grid-margin) !important;
      padding-right: clamp(24px, 4vw, 70px) !important;
    }

    :where(html.home-page) .steps-scanner .steps-heading-zone h2 {
      margin: 0 !important;
      max-width: 7em !important;
      color: #fff !important;
      font-size: clamp(54px, 6.2vw, 116px) !important;
      line-height: .88 !important;
      letter-spacing: -.065em !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .steps-scanner .steps-kicker {
      margin: 0 0 26px !important;
      color: rgba(255,255,255,.42) !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .steps-scanner .steps-stage {
      grid-column: 2 !important;
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      padding: clamp(88px, 12vh, 132px) var(--grid-margin) clamp(70px, 9vh, 100px) 0 !important;
      box-sizing: border-box !important;
    }

    :where(html.home-page) .steps-scanner .steps-track {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      width: 100% !important;
      min-height: 100% !important;
      height: auto !important;
      transform: translate3d(0, var(--steps-y, 0px), 0);
      will-change: transform !important;
    }

    :where(html.home-page) .steps-scanner .step {
      min-height: clamp(260px, 34vh, 360px) !important;
      display: grid !important;
      grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      column-gap: clamp(18px, 3vw, 42px) !important;
      align-content: center !important;
      padding: clamp(34px, 5vh, 58px) 0 !important;
      border-top: 1px solid rgba(255,255,255,.09) !important;
      background: transparent !important;
      opacity: .38 !important;
      transition: opacity .36s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .steps-scanner .step:last-child {
      border-bottom: 1px solid rgba(255,255,255,.09) !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible {
      opacity: 1 !important;
    }

    :where(html.home-page) .steps-scanner .step-visual {
      grid-column: 1 !important;
      grid-row: 1 / span 2 !important;
      width: clamp(120px, 11vw, 160px) !important;
      height: clamp(120px, 11vw, 160px) !important;
      align-self: center !important;
      justify-self: start !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 18px !important;
      border: 1px solid rgba(255,255,255,.08) !important;
      background: rgba(255,255,255,.035) !important;
      overflow: hidden !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    :where(html.home-page) .steps-scanner .step-visual canvas {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    :where(html.home-page) .steps-scanner .step-marker {
      grid-column: 2 !important;
      grid-row: 1 !important;
      margin: 0 0 18px !important;
      color: rgba(255,255,255,.42) !important;
      font-family: var(--font-mono) !important;
      font-size: 12px !important;
      letter-spacing: .12em !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible .step-marker {
      color: #386ABB !important;
    }

    :where(html.home-page) .steps-scanner .step h3 {
      grid-column: 2 !important;
      grid-row: 2 !important;
      margin: 0 0 30px !important;
      color: #fff !important;
      font-size: clamp(26px, 2.15vw, 38px) !important;
      line-height: 1 !important;
      letter-spacing: -.04em !important;
      font-weight: 700 !important;
    }

    :where(html.home-page) .steps-scanner .step p {
      grid-column: 2 !important;
      grid-row: 3 !important;
      margin: 0 !important;
      max-width: 620px !important;
      color: rgba(255,255,255,.66) !important;
      font-size: clamp(15px, 1.1vw, 18px) !important;
      line-height: 1.55 !important;
    }

    :where(html.home-page) .steps-scanner .steps-bottom-progress {
      display: grid !important;
      position: absolute !important;
      z-index: 6 !important;
      left: var(--grid-margin) !important;
      right: var(--grid-margin) !important;
      bottom: 34px !important;
      grid-template-columns: auto minmax(220px, 420px) !important;
      gap: 24px !important;
      align-items: center !important;
      color: rgba(255,255,255,.52) !important;
      pointer-events: none !important;
    }

    :where(html.home-page) .steps-scanner .steps-progress-dots {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 10px !important;
    }

    :where(html.home-page) .steps-scanner .steps-progress-dots i {
      height: 2px !important;
      border-radius: 0 !important;
      background: rgba(255,255,255,.18) !important;
    }

    :where(html.home-page) .steps-scanner .steps-progress-dots i.active {
      background: #386ABB !important;
    }

    :where(html.home-page) .faq {
      position: relative !important;
      z-index: 1 !important;
      margin-bottom: 0 !important;
    }

    :where(html.home-page) footer.contact,
    :where(html.home-page) .contact {
      position: relative !important;
      z-index: 1 !important;
      margin-top: 0 !important;
      transform: none !important;
    }

    @media (max-width: 1024px), (prefers-reduced-motion: reduce) {
      :where(html.home-page) .projects-runway {
        height: auto !important;
        min-height: 0 !important;
        padding: 92px var(--grid-margin) 110px !important;
        overflow: visible !important;
      }

      :where(html.home-page) .projects-runway .projects-title {
        position: static !important;
        margin-bottom: 38px !important;
      }

      :where(html.home-page) .projects-runway .projects-track {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        padding: 0 !important;
        transform: none !important;
      }

      :where(html.home-page) .projects-runway .project,
    :where(html.home-page) .projects-runway .project:nth-child(even) {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }

      :where(html.home-page) .projects-runway .project figure,
    :where(html.home-page) .projects-runway .project:nth-child(even) figure {
        grid-column: 1 !important;
        height: auto !important;
        aspect-ratio: 1.25 !important;
      }

      :where(html.home-page) .projects-runway .projects-progress {
        display: none !important;
      }

      :where(html.home-page) .steps-scanner {
        height: auto !important;
        min-height: 0 !important;
        padding: 88px var(--grid-margin) 96px !important;
        overflow: visible !important;
      }

      :where(html.home-page) .steps-scanner .steps-sticky {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        overflow: visible !important;
      }

      :where(html.home-page) .steps-scanner .steps-heading-zone {
        padding: 0 0 42px !important;
      }

      :where(html.home-page) .steps-scanner .steps-stage {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
      }

      :where(html.home-page) .steps-scanner .steps-track {
        transform: none !important;
      }

      :where(html.home-page) .steps-scanner .step {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        padding: 32px 0 !important;
        opacity: 1 !important;
      }

      :where(html.home-page) .steps-scanner .step-visual {
        width: 132px !important;
        height: 132px !important;
        margin-bottom: 24px !important;
      }

      :where(html.home-page) .steps-scanner .step-marker,
    :where(html.home-page) .steps-scanner .step h3,
    :where(html.home-page) .steps-scanner .step p,
    :where(html.home-page) .steps-scanner .step-visual {
        grid-column: 1 !important;
        grid-row: auto !important;
      }

      :where(html.home-page) .steps-scanner .steps-bottom-progress {
        display: none !important;
      }
    }

    /* Stable loader -> tunnel -> manifesto layer */
    

    

    

    

    

    

    

    

    /* Final scroll-scene repair: pin hero, projects and steps */
    

    

    

    

    

    

    

    

    

    

    

    :where(html.home-page) .projects-runway {
      --projects-x: 0px;
      --projects-progress: 0%;
      position: relative !important;
      height: var(--projects-scroll-height, 260vh) !important;
      min-height: 180vh !important;
      padding: 0 !important;
      overflow: visible !important;
      background: #FFFFFF !important;
      contain: none !important;
    }

    :where(html.home-page) .projects-runway .projects-track {
      position: sticky !important;
      top: 0 !important;
      height: 100vh !important;
      width: max-content !important;
      display: flex !important;
      flex-flow: row nowrap !important;
      align-items: center !important;
      gap: clamp(40px, 5vw, 90px) !important;
      padding: 0 var(--grid-margin) !important;
      transform: translate3d(var(--projects-x), 0, 0);
      will-change: transform !important;
      overflow: visible !important;
    }

    :where(html.home-page) .projects-runway .project,
    :where(html.home-page) .projects-runway .project:nth-child(even) {
      flex: 0 0 min(86vw, 1240px) !important;
      width: min(86vw, 1240px) !important;
      height: min(74vh, 720px) !important;
      min-height: 540px !important;
      display: grid !important;
      grid-template-columns: minmax(300px, .42fr) minmax(0, .58fr) !important;
      gap: clamp(28px, 4vw, 72px) !important;
      align-items: center !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .projects-runway .project figure,
    :where(html.home-page) .projects-runway .project:nth-child(even) figure {
      grid-column: 2 !important;
      grid-row: 1 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
    }

    :where(html.home-page) .steps-scanner {
      --steps-y: 0px;
      position: relative !important;
      height: var(--steps-scroll-height, 240vh) !important;
      min-height: 180vh !important;
      padding: 0 !important;
      overflow: visible !important;
      background: #08090F !important;
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      position: sticky !important;
      top: 0 !important;
      height: 100vh !important;
      min-height: 100vh !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 0 !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .steps-scanner .steps-stage {
      grid-column: 2 !important;
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      padding: 14vh var(--grid-margin) 14vh 0 !important;
    }

    :where(html.home-page) .steps-scanner .steps-track {
      transform: translate3d(0, var(--steps-y), 0);
      will-change: transform !important;
    }

    :where(html.home-page) .steps-scanner .step {
      min-height: 38vh !important;
    }

    :where(html.home-page) .projects-runway.is-gsap-scene,
    :where(html.home-page) .steps-scanner.is-gsap-scene {
      overflow: visible !important;
    }

    html:where(.home-page),
    :where(html.home-page) body,
    :where(html.home-page) #top,
    :where(html.home-page) main,
    :where(html.home-page) main > .section,
    :where(html.home-page) main > section,
    :where(html.home-page) .projects-runway,
    :where(html.home-page) .projects-runway .projects-track {
      overflow: visible !important;
      overflow-x: visible !important;
    }

    

    

    @media (min-width: 1025px) {
      :where(html.home-page) .projects-runway {
        position: relative !important;
        height: var(--projects-scroll-height, 260vh) !important;
        min-height: 180vh !important;
        overflow: visible !important;
        contain: none !important;
      }

      :where(html.home-page) .projects-runway .projects-track {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        width: max-content !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        transform: translate3d(var(--projects-x), 0, 0);
        will-change: transform !important;
        overflow: visible !important;
      }
    }

    @media (max-width: 1024px), (prefers-reduced-motion: reduce) {
      
      :where(html.home-page) .projects-runway,
    :where(html.home-page) .steps-scanner {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }

      
      :where(html.home-page) .projects-runway .projects-track,
    :where(html.home-page) .steps-scanner .steps-sticky {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        transform: none !important;
      }

      
    }
    /* Figma cases pass + final requested fixes */
    :where(html.home-page) .figma-cases {
      --projects-x: 0px;
      --projects-progress: 0%;
      background: #ffffff !important;
      height: var(--projects-scroll-height, 420vh) !important;
      min-height: 180vh !important;
      padding: 0 !important;
      overflow: visible !important;
    }

    :where(html.home-page) .figma-cases .projects-title {
      position: sticky !important;
      top: 80px !important;
      z-index: 6 !important;
      width: calc(100vw - 160px) !important;
      margin: 0 80px !important;
      font-family: var(--font-mono) !important;
      font-size: 16px !important;
      line-height: 1.2 !important;
      color: #2b2b2b !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }

    :where(html.home-page) .figma-cases .projects-title::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 10px;
      border-radius: 1px;
      background: #707070;
      vertical-align: 1px;
    }

    :where(html.home-page) .figma-cases .projects-track {
      position: sticky !important;
      top: 0 !important;
      height: 100vh !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 0 !important;
      align-items: stretch !important;
      padding: 0 !important;
      transform: translate3d(var(--projects-x, 0px), 0, 0);
      will-change: transform !important;
      width: max-content !important;
    }

    :where(html.home-page) .figma-cases .project,
    :where(html.home-page) .figma-cases .project:nth-child(even) {
      position: relative !important;
      flex: 0 0 100vw !important;
      width: 100vw !important;
      height: auto !important;
      min-height: 100vh !important;
      display: block !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
      color: #2b2b2b !important;
      background: #f7fafd !important;
      opacity: 1 !important;
      transform: none !important;
    }

    :where(html.home-page) .figma-cases .project[data-case="charity"] { background: #fffcf6 !important; }
    :where(html.home-page) .figma-cases .project[data-case="monastery"] { background: #fcfaf6 !important; }
    :where(html.home-page) .figma-cases .project[data-case="memorial"] { background: #f9f9f9 !important; }

    :where(html.home-page) .figma-cases .project-copy,
    :where(html.home-page) .figma-cases .project:nth-child(even) .project-copy {
      position: absolute !important;
      left: 80px !important;
      top: 130px !important;
      z-index: 4 !important;
      width: 416px !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important;
      padding: 0 !important;
      color: #2b2b2b !important;
      opacity: 1 !important;
      transform: none !important;
    }

    :where(html.home-page) .figma-cases .project h3 {
      margin: 0 !important;
      max-width: 416px !important;
      font-family: var(--font-main) !important;
      font-size: clamp(44px, 3.34vw, 64px) !important;
      font-weight: 500 !important;
      line-height: 1.2 !important;
      letter-spacing: -.04em !important;
      color: #2b2b2b !important;
      text-transform: none !important;
    }

    :where(html.home-page) .figma-cases .project .eyebrow {
      margin: 0 !important;
      color: #026eed !important;
      font-family: var(--font-mono) !important;
      font-size: 16px !important;
      line-height: 1.2 !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }

    :where(html.home-page) .figma-cases .project-desc {
      margin: 0 !important;
      color: #2d2d2d !important;
      font-family: var(--font-mono) !important;
      font-size: clamp(16px, 1.04vw, 20px) !important;
      line-height: 1.3 !important;
      letter-spacing: 0 !important;
    }

    :where(html.home-page) .figma-cases .project-url {
      position: absolute;
      left: 80px;
      bottom: 272px;
      z-index: 4;
      margin: 0 !important;
      color: #026eed !important;
      font-size: 24px !important;
      line-height: 1.2 !important;
    }

    :where(html.home-page) .figma-cases .project-mini {
      position: absolute;
      left: 80px;
      bottom: 187px;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 30px;
      width: 416px;
      height: 50px;
    }

    :where(html.home-page) .figma-cases .project-mini img {
      width: 78px;
      height: 50px;
      border-radius: 10px;
      object-fit: cover;
    }

    :where(html.home-page) .figma-cases .project-mini span {
      display: flex;
      height: 50px;
      flex-direction: column;
      justify-content: space-between;
      font-size: 20px;
      line-height: 1.2;
      color: #2b2b2b;
    }

    :where(html.home-page) .figma-cases .project-mini small {
      color: #8b8b8b;
      font-size: 20px;
    }

    :where(html.home-page) .figma-cases .project figure,
    :where(html.home-page) .figma-cases .project:nth-child(even) figure {
      position: absolute !important;
      left: 35.26vw !important;
      top: 12.04vh !important;
      z-index: 3 !important;
      width: 60.57vw !important;
      height: min(69.44vh, 750px) !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: clamp(16px, 1.4vw, 28px) !important;
      border: 0 !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      box-shadow: none !important;
      background: transparent !important;
      transform: none !important;
      opacity: 1 !important;
    }

    :where(html.home-page) .figma-cases .project figure .case-layer {
      position: absolute;
      display: block;
      pointer-events: none;
      user-select: none;
    }

    :where(html.home-page) .figma-cases .project figure .case-layer-bg {
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
    }

    :where(html.home-page) .figma-cases .project figure .case-layer-ui {
      left: 15.74%;
      top: 13.87%;
      width: 68.44%;
      height: 72.14%;
      object-fit: cover;
      border-radius: 20px;
    }

    :where(html.home-page) .figma-cases .project figure .case-layer-ui.is-charity-device {
      object-fit: contain;
    }

    :where(html.home-page) .figma-cases .project[data-case="memorial"] figure .case-layer-bg {
      object-position: bottom center;
    }

    :where(html.home-page) .figma-cases .project figure .case-dim {
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: rgba(0, 0, 0, .15);
      pointer-events: none;
    }

    :where(html.home-page) .figma-cases .project figure img {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: auto !important;
      height: auto !important;
      max-width: calc(100% - clamp(32px, 2.8vw, 56px)) !important;
      max-height: calc(100% - clamp(32px, 2.8vw, 56px)) !important;
      object-fit: contain !important;
      border-radius: 20px !important;
      filter: none !important;
      transform: translate(-50%, -50%) !important;
      transition: none !important;
    }

    :where(html.home-page) .figma-cases .project:hover figure img {
      transform: translate(-50%, -50%) !important;
    }

    :where(html.home-page) .figma-cases .project[style] figure img {
      transform: translate(-50%, -50%) !important;
    }

    :where(html.home-page) .figma-cases .project-count {
      position: absolute;
      top: 80px;
      right: 80px;
      font-family: var(--font-mono);
      font-size: 16px;
      line-height: 1.2;
      color: #949494;
    }

    :where(html.home-page) .figma-cases .tags,
    :where(html.home-page) .figma-cases .projects-progress {
      display: none !important;
    }

    

    

    :where(html.home-page) .motion-draw-target {
      --line-reveal: 0;
      --scan-x: -140%;
      --scan-opacity: 0;
      position: relative;
    }

    :where(html.home-page) .motion-draw-target::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
      border: 1px solid rgba(56, 106, 187, .22);
      clip-path: inset(0 calc(100% - (var(--line-reveal) * 100%)) calc(100% - (var(--line-reveal) * 100%)) 0);
      opacity: .95;
    }

    :where(html.home-page) .motion-draw-target::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: 9;
      pointer-events: none;
      background: linear-gradient(90deg, transparent 0%, rgba(56, 106, 187, .18) 48%, transparent 100%);
      transform: translate3d(var(--scan-x), 0, 0);
      opacity: var(--scan-opacity);
      mix-blend-mode: multiply;
    }

    :where(html.home-page) .service-card.motion-draw-target::after,
    :where(html.home-page) .faq details.motion-draw-target::after {
      border-color: rgba(0, 0, 0, .12);
    }

    :where(html.home-page) .figma-cases .project.motion-card-ready {
      opacity: 0 !important;
      transform: translate3d(0, 40px, 0) scale(.985) !important;
      filter: blur(8px) !important;
      will-change: opacity, transform, filter;
    }

    :where(html.home-page) .service-card .service-visual {
      transform-origin: 50% 50%;
      will-change: transform, opacity, filter;
    }

    :where(html.home-page) .figma-cases .project.motion-card-in {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      filter: blur(0) !important;
      transition:
        opacity 1s var(--ease-reveal),
        transform 1s var(--ease-reveal),
        filter 1s var(--ease-reveal);
    }

    :where(html.home-page) .calculator-options button,
    :where(html.home-page) .calculator-options button:hover,
    :where(html.home-page) .calculator-options button.is-selected,
    :where(html.home-page) .calculator-options button:focus-visible {
      border-color: rgba(0,0,0,.08) !important;
      outline-color: rgba(0,0,0,.28) !important;
    }

    :where(html.home-page) .services .service-card.reveal-target,
    :where(html.home-page) .services .service-card.big.reveal-target,
    :where(html.home-page) .services .service-card.small.reveal-target {
      opacity: 0 !important;
      transform: translate3d(0, var(--reveal-y, -40px), 0) !important;
      filter: blur(8px) !important;
      pointer-events: none;
      transition:
        opacity .82s var(--ease-aww),
        transform .82s var(--ease-aww),
        filter .82s var(--ease-aww),
        background-color .3s var(--ease-aww),
        color .3s var(--ease-aww),
        border-color .3s var(--ease-aww) !important;
      transition-delay: var(--reveal-delay, 0ms) !important;
    }

    :where(html.home-page) .services .service-card.reveal-target.is-revealed,
    :where(html.home-page) .services .service-card.big.reveal-target.is-revealed,
    :where(html.home-page) .services .service-card.small.reveal-target.is-revealed {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
      filter: blur(0) !important;
      pointer-events: auto;
    }

    :where(html.home-page) .services .service-card:nth-child(1) { --reveal-delay: 100ms; }
    :where(html.home-page) .services .service-card:nth-child(2) { --reveal-delay: 250ms; }
    :where(html.home-page) .services .service-card:nth-child(3) { --reveal-delay: 400ms; }
    :where(html.home-page) .services .service-card:nth-child(4) { --reveal-delay: 550ms; }

    :where(html.home-page) .services .service-card.has-draw-border,
    :where(html.home-page) .services .service-card.big.has-draw-border,
    :where(html.home-page) .services .service-card.small.has-draw-border {
      border-color: transparent !important;
    }

    :where(html.home-page) .services .service-card__border {
      position: absolute;
      inset: 0;
      z-index: 6;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    :where(html.home-page) .services .service-card__border-path {
      fill: none;
      stroke: rgba(20, 31, 56, .14);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
      path-length: 1;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke .3s ease;
      transform-box: fill-box;
      transform-origin: center;
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services .service-card.has-draw-border:hover .service-card__border-path {
        stroke: rgba(62, 102, 220, .3);
      }
    }

    @property --line-top { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
    @property --line-right { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
    @property --line-bottom { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
    @property --line-left { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

    :where(html.home-page) .services .service-card::before,
    :where(html.home-page) .services .service-card::after {
      opacity: 0 !important;
      transform: scale(.72);
      transition: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services .service-card.is-revealed:hover::before,
    :where(html.home-page) .services .service-card.is-revealed:hover::after {
        opacity: 1 !important;
        transform: scale(1);
        transition:
          opacity .3s var(--ease-aww),
          transform .3s var(--ease-aww) !important;
      }

      :where(html.home-page) .services .service-card.is-revealed:hover,
    :where(html.home-page) .services .service-card.big.is-revealed:hover,
    :where(html.home-page) .services .service-card.small.is-revealed:hover {
        color: #FFFFFF !important;
        background: #0D0D0D !important;
        border-color: rgba(0,0,0,.08) !important;
        transform: none !important;
        transition:
          background-color .3s var(--ease-aww),
          color .3s var(--ease-aww),
          border-color .3s var(--ease-aww),
          transform .3s var(--ease-aww) !important;
      }

      :where(html.home-page) .services .service-card.is-revealed:hover .service-title,
    :where(html.home-page) .services .service-card.is-revealed:hover .service-text,
    :where(html.home-page) .services .service-card.is-revealed:hover .service-num {
        color: #FFFFFF !important;
      }

      :where(html.home-page) .services .service-card.is-revealed:hover .service-visual {
        opacity: .72 !important;
        filter: invert(1) grayscale(1) !important;
      }
    }

    :where(html.home-page) .services.services-hover-ready .service-card.reveal-target.is-revealed,
    :where(html.home-page) .services.services-hover-ready .service-card.big.reveal-target.is-revealed,
    :where(html.home-page) .services.services-hover-ready .service-card.small.reveal-target.is-revealed {
      transition: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services.services-hover-ready .service-card.reveal-target.is-revealed:hover,
    :where(html.home-page) .services.services-hover-ready .service-card.big.reveal-target.is-revealed:hover,
    :where(html.home-page) .services.services-hover-ready .service-card.small.reveal-target.is-revealed:hover {
        transition:
          background-color .3s var(--ease-aww),
          color .3s var(--ease-aww),
          border-color .3s var(--ease-aww),
          transform .3s var(--ease-aww) !important;
      }
    }

    :where(html.home-page) .services .service-card.has-draw-border,
    :where(html.home-page) .services .service-card.big.has-draw-border,
    :where(html.home-page) .services .service-card.small.has-draw-border,
    :where(html.home-page) .services .service-card.has-draw-border.is-revealed:hover,
    :where(html.home-page) .services .service-card.big.has-draw-border.is-revealed:hover,
    :where(html.home-page) .services .service-card.small.has-draw-border.is-revealed:hover {
      border-color: transparent !important;
    }

    @media (prefers-reduced-motion: reduce) {
      :where(html.home-page) .services .service-card__border-path {
        stroke-dashoffset: 0 !important;
      }

      :where(html.home-page) .services .service-card.reveal-target {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
      }
    }

    :where(html.home-page) .faq {
      grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr) !important;
      column-gap: 32px !important;
      padding-top: clamp(96px, 10vw, 150px) !important;
      padding-bottom: clamp(110px, 12vw, 180px) !important;
    }

    :where(html.home-page) .faq h2 {
      top: 112px !important;
      max-width: 430px !important;
      letter-spacing: -.045em !important;
      color: #101216 !important;
    }

    :where(html.home-page) .faq-list {
      border-top: 1px solid rgba(15,16,21,.10) !important;
    }

    :where(html.home-page) .faq details {
      border-bottom: 1px solid rgba(15,16,21,.10) !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      overflow: hidden !important;
    }

    :where(html.home-page) .faq details:hover {
      background-image: linear-gradient(90deg, rgba(56,106,187,.06), transparent 58%) !important;
      box-shadow: none !important;
    }

    :where(html.home-page) .faq summary {
      min-height: 92px !important;
      padding: 28px 70px 28px 0 !important;
      font-size: clamp(19px, 1.35vw, 26px) !important;
      line-height: 1.18 !important;
      color: #17191d !important;
      transition: color .3s var(--ease-aww), padding-left .35s var(--ease-aww) !important;
    }

    :where(html.home-page) .faq summary::after {
      right: 8px !important;
      width: 18px !important;
      height: 18px !important;
      border-color: #17191d !important;
      opacity: .82 !important;
    }

    :where(html.home-page) .faq details[open] summary {
      color: #386ABB !important;
      font-weight: 700 !important;
    }

    :where(html.home-page) .faq details p {
      max-width: 760px !important;
      padding: 0 72px 32px 0 !important;
      color: rgba(17,18,21,.68) !important;
      font-size: clamp(15px, 1.04vw, 18px) !important;
      line-height: 1.65 !important;
    }

    :where(html.home-page) .faq .faq-answer-inner {
      padding-top: 0 !important;
    }

    :where(html.home-page) .faq {
      align-items: start !important;
    }

    :where(html.home-page) .faq-list {
      counter-reset: faq-item;
      border-top: 1px solid rgba(15, 16, 21, .12) !important;
    }

    :where(html.home-page) .faq details {
      counter-increment: faq-item;
      position: relative !important;
      padding-left: 76px !important;
      border: 0 !important;
      border-bottom: 1px solid rgba(15, 16, 21, .12) !important;
      background: transparent !important;
    }

    :where(html.home-page) .faq details::before {
      content: counter(faq-item, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: 32px;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1;
      letter-spacing: .08em;
      color: rgba(15, 16, 21, .35);
      transition: color .35s var(--ease-aww), transform .35s var(--ease-aww);
    }

    :where(html.home-page) .faq details[open]::before {
      color: #386ABB;
      transform: translateX(6px);
    }

    :where(html.home-page) .faq details.motion-draw-target::after,
    :where(html.home-page) .faq details.motion-draw-target::before {
      display: block;
    }

    :where(html.home-page) .faq details.motion-draw-target::after {
      display: none !important;
    }

    :where(html.home-page) .faq details.motion-draw-target::before {
      content: counter(faq-item, decimal-leading-zero) !important;
      background: none !important;
      inset: auto !important;
      opacity: 1 !important;
      transform: none;
      mix-blend-mode: normal;
    }

    :where(html.home-page) .faq details[open].motion-draw-target::before {
      transform: translateX(6px);
    }

    :where(html.home-page) .faq summary {
      min-height: 96px !important;
      padding: 32px 84px 32px 0 !important;
      border: 0 !important;
      font-size: clamp(21px, 1.46vw, 28px) !important;
      font-weight: 500 !important;
    }

    :where(html.home-page) .faq summary::after {
      content: "+" !important;
      width: auto !important;
      height: auto !important;
      border: 0 !important;
      right: 6px !important;
      top: 32px !important;
      font-family: var(--font-mono);
      font-size: 18px;
      line-height: 1;
      color: rgba(15, 16, 21, .7);
      transform: none !important;
    }

    :where(html.home-page) .faq details[open] summary::after {
      content: "-" !important;
      color: #386ABB;
      transform: none !important;
    }

    :where(html.home-page) .faq details p {
      padding: 0 96px 38px 0 !important;
      max-width: 800px !important;
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .figma-cases {
        height: auto !important;
        min-height: 0 !important;
        padding: 80px 20px !important;
      }

      :where(html.home-page) .figma-cases .projects-title,
    :where(html.home-page) .figma-cases .projects-track,
    :where(html.home-page) .figma-cases .project,
    :where(html.home-page) .figma-cases .project-copy,
    :where(html.home-page) .figma-cases .project figure,
    :where(html.home-page) .figma-cases .project-mini,
    :where(html.home-page) .figma-cases .project-url {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
      }

      :where(html.home-page) .figma-cases .projects-title {
        margin: 0 0 32px !important;
      }

      :where(html.home-page) .figma-cases .projects-track {
        display: grid !important;
        gap: 28px !important;
        transform: none !important;
      }

      :where(html.home-page) .figma-cases .project {
        padding: 24px 0 0 !important;
      }

      :where(html.home-page) .figma-cases .project figure {
        margin-top: 28px !important;
        aspect-ratio: 16 / 10 !important;
      }
    }

@media (min-width: 1025px) {
  :where(html.home-page) #projects.figma-cases {
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  :where(html.home-page) #projects.figma-cases .projects-track {
    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
        margin-right: 0 !important;
      }

      :where(html.home-page) #projects.figma-cases .projects-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
      }

      :where(html.home-page) .figma-cases .project,
    :where(html.home-page) .figma-cases .project:nth-child(even) {
        flex: 0 0 100vw !important;
        flex-shrink: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 0 !important;
        max-height: none !important;
        --case-image-scale: 1 !important;
      }

      :where(html.home-page) .figma-cases .project figure,
    :where(html.home-page) .figma-cases .project:nth-child(even) figure {
        left: 35.26% !important;
        top: 12.04% !important;
        width: 60.57% !important;
        height: 69.44% !important;
        min-height: 0 !important;
        max-height: none !important;
      }

      :where(html.home-page) #projects.figma-cases .project figure img {
        object-fit: contain !important;
        --case-image-scale: 1 !important;
        transform: translate(-50%, -50%) !important;
      }
    }

    /* Project reveal system: Shift5-inspired line draw + soft card materialization */
    :where(html.home-page) #projects .line-reveal-target,
    :where(html.home-page) #projects .projects-title::after,
    :where(html.home-page) #projects .project figure::after {
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .9s var(--ease-reveal);
      will-change: transform;
    }

    :where(html.home-page) #projects .projects-title::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -18px;
      height: 1px;
      background: rgba(0, 0, 0, .12);
      pointer-events: none;
    }

    :where(html.home-page) #projects .project figure::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 4;
      height: 1px;
      background: rgba(0, 102, 255, .22);
      pointer-events: none;
    }

    :where(html.home-page) #projects .projects-title.is-revealed::after,
    :where(html.home-page) #projects .line-reveal-target.is-revealed,
    :where(html.home-page) #projects .project.is-revealed figure::after {
      transform: scaleX(1);
    }

    :where(html.home-page) #projects .project.reveal-target {
      opacity: 0 !important;
      transform: translate3d(0, 40px, 0) !important;
      filter: blur(8px) !important;
      transition:
        opacity 1s var(--ease-reveal),
        transform 1s var(--ease-reveal),
        filter 1s var(--ease-reveal) !important;
      transition-delay: var(--reveal-delay, 0ms) !important;
      will-change: opacity, transform, filter !important;
    }

    :where(html.home-page) #projects .project.reveal-target.is-revealed {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) !important;
      filter: blur(0) !important;
    }

    :where(html.home-page) #projects .project.reveal-target:nth-child(2) { --reveal-delay: 150ms; }
    :where(html.home-page) #projects .project.reveal-target:nth-child(3) { --reveal-delay: 300ms; }
    :where(html.home-page) #projects .project.reveal-target:nth-child(4) { --reveal-delay: 450ms; }
    :where(html.home-page) #projects .project.reveal-target:nth-child(5) { --reveal-delay: 600ms; }

    @media (prefers-reduced-motion: reduce) {
      :where(html.home-page) #projects .line-reveal-target,
    :where(html.home-page) #projects .projects-title::after,
    :where(html.home-page) #projects .project figure::after,
    :where(html.home-page) #projects .project.reveal-target {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
      }
    }

    /* Final viewport lock: one project case equals one full desktop screen */
    @media (min-width: 1025px) {
      :where(html.home-page) #projects.figma-cases {
        width: 100vw !important;
        height: var(--projects-scroll-height, 420vh) !important;
        min-height: 100vh !important;
        max-width: none !important;
        overflow: visible !important;
      }

      :where(html.home-page) #projects.figma-cases .projects-track {
        position: sticky !important;
        top: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        width: max-content !important;
        height: 100vh !important;
        max-width: none !important;
        overflow: visible !important;
      }

      :where(html.home-page) #projects.figma-cases .project,
    :where(html.home-page) #projects.figma-cases .project:nth-child(even) {
        flex: 0 0 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        min-width: 100vw !important;
        min-height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
      }
    }

    /* Axio unified motion language: Shift5-style draw, scan, materialize */
    :where(html.home-page) .motion-draw-target {
      isolation: isolate;
      overflow: hidden;
    }

    :where(html.home-page) .motion-draw-target::after {
      transition:
        clip-path .9s var(--ease-reveal),
        opacity .9s var(--ease-reveal),
        transform .9s var(--ease-reveal) !important;
    }

    :where(html.home-page) .motion-draw-target.motion-card-in::after {
      clip-path: inset(0 0 0 0) !important;
      opacity: 1 !important;
    }

    :where(html.home-page) .motion-draw-target.motion-card-in::before {
      transition:
        transform .78s var(--ease-reveal),
        opacity .42s var(--ease-reveal) !important;
    }

    :where(html.home-page) .faq details.motion-draw-target {
      border-color: transparent !important;
    }

    :where(html.home-page) .faq details.motion-draw-target::after {
      border: 0 !important;
      border-top: 1px solid rgba(15,16,21,.12) !important;
      border-bottom: 1px solid rgba(15,16,21,.12) !important;
      clip-path: inset(0 calc(100% - (var(--line-reveal) * 100%)) 0 0);
    }

    :where(html.home-page) .calculator-content.motion-draw-target::after,
    :where(html.home-page) .calculator-heading.motion-draw-target::after {
      border-color: rgba(15,16,21,.10) !important;
    }

    :where(html.home-page) .service-card.motion-card-ready:nth-child(2),
    :where(html.home-page) .faq details.motion-card-ready:nth-child(2),
    :where(html.home-page) .figma-cases .project.motion-card-ready:nth-child(2) { transition-delay: 120ms; }

    :where(html.home-page) .service-card.motion-card-ready:nth-child(3),
    :where(html.home-page) .faq details.motion-card-ready:nth-child(3),
    :where(html.home-page) .figma-cases .project.motion-card-ready:nth-child(3) { transition-delay: 240ms; }

    :where(html.home-page) .service-card.motion-card-ready:nth-child(4),
    :where(html.home-page) .faq details.motion-card-ready:nth-child(4),
    :where(html.home-page) .figma-cases .project.motion-card-ready:nth-child(4) { transition-delay: 360ms; }

    :where(html.home-page) .shift-title-ready {
      display: block;
      clip-path: inset(100% 0 0 0);
      transform: translate3d(0, 100%, 0);
      will-change: clip-path, transform, opacity;
    }

    :where(html.home-page) .shift-title-in {
      clip-path: inset(0 0 0 0);
      transform: translate3d(0, 0, 0);
      transition:
        clip-path .86s var(--ease-reveal),
        transform .86s var(--ease-reveal);
    }

    

    

    

    

    

    @keyframes heroTitleRevealUp {
      to { transform: translate3d(0, 0, 0); }
    }

    

    :where(html.home-page) .faq details.motion-card-in p {
      animation: faqAnswerRise .55s var(--ease-reveal) both;
    }

    @keyframes faqAnswerRise {
      from {
        opacity: .45;
        transform: translate3d(0, 12px, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    :where(html.home-page) .steps-scanner {
      position: relative;
      z-index: 2;
    }

    html:where(.home-page),
    :where(html.home-page) body,
    :where(html.home-page) #top,
    :where(html.home-page) main,
    :where(html.home-page) .projects,
    :where(html.home-page) #projects.figma-cases,
    :where(html.home-page) #projects.figma-cases .project,
    :where(html.home-page) .projects-runway,
    :where(html.home-page) .steps,
    :where(html.home-page) .steps-scanner,
    :where(html.home-page) .steps-sticky,
    :where(html.home-page) .calculator {
      background-color: var(--color--background) !important;
      color: var(--color--text) !important;
      transition:
        background-color .9s cubic-bezier(.16, 1, .3, 1),
        color .9s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .steps-scanner::before,
    :where(html.home-page) .steps-scanner .steps-sticky::before,
    :where(html.home-page) .steps-scanner .steps-sticky::after,
    :where(html.home-page) .calculator::before,
    :where(html.home-page) .projects::before,
    :where(html.home-page) .projects-runway::before {
      background-color: transparent !important;
    }

    :where(html.home-page) .step p,
    :where(html.home-page) .steps-description,
    :where(html.home-page) .steps-scanner .step p,
    :where(html.home-page) .steps-scanner .steps-kicker,
    :where(html.home-page) .steps-scanner .step-copy > span {
      color: var(--color--muted) !important;
      transition: color .9s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .steps-scanner .step,
    :where(html.home-page) .steps-scanner .step::before,
    :where(html.home-page) .steps-scanner .step::after,
    :where(html.home-page) .steps-scanner .step-left-line,
    :where(html.home-page) .steps-scanner .steps-bottom-progress,
    :where(html.home-page) .calculator-panel,
    :where(html.home-page) .calculator-content {
      border-color: var(--color--line) !important;
      transition: border-color .9s cubic-bezier(.16, 1, .3, 1) !important;
    }

    /* Final services border draw: the visible frame is SVG, not the static CSS border. */
    :where(html.home-page) .services .service-card.has-draw-border,
    :where(html.home-page) .services .service-card.big.has-draw-border,
    :where(html.home-page) .services .service-card.small.has-draw-border,
    :where(html.home-page) .services .service-card.has-draw-border:hover,
    :where(html.home-page) .services .service-card.big.has-draw-border:hover,
    :where(html.home-page) .services .service-card.small.has-draw-border:hover,
    :where(html.home-page) .services.services-hover-ready .service-card.has-draw-border:hover,
    :where(html.home-page) .services.services-hover-ready .service-card.big.has-draw-border:hover,
    :where(html.home-page) .services.services-hover-ready .service-card.small.has-draw-border:hover {
      border-color: transparent !important;
    }

    :where(html.home-page) .services .service-card.has-draw-border .service-card__border {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 20 !important;
      width: 100% !important;
      height: 100% !important;
      pointer-events: none !important;
      overflow: visible !important;
    }

    :where(html.home-page) .services .service-card.has-draw-border .service-card__border-path {
      fill: none !important;
      stroke: rgba(15,16,21,.30) !important;
      stroke-width: 1 !important;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1 !important;
      stroke-dashoffset: 1;
      transition: stroke .22s ease !important;
    }

    :where(html.home-page) .services .service-card.has-draw-border.is-border-drawing .service-card__border-path {
      stroke: rgba(15,16,21,.42) !important;
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services .service-card.has-draw-border:hover .service-card__border-path {
        stroke: rgba(0,102,255,.62) !important;
      }
    }

    /* Updated Figma system: persistent 12-column construction grid. */
    :where(html.home-page) .axios-site-grid {
      position: fixed;
      z-index: 18;
      inset: 0 var(--grid-margin);
      pointer-events: none;
      opacity: .7;
      overflow: hidden;
    }

    :where(html.home-page) .axios-site-grid > i {
      position: absolute;
      display: block;
      background: rgba(68, 91, 128, .18);
      will-change: transform;
    }

    :where(html.home-page) .axios-site-grid .grid-v {
      top: 0;
      bottom: 0;
      width: 1px;
      transform: scaleY(0);
      transform-origin: top center;
    }

    :where(html.home-page) .axios-site-grid .grid-v:nth-child(1) { left: 0; }
    :where(html.home-page) .axios-site-grid .grid-v:nth-child(2) { left: 33.333%; }
    :where(html.home-page) .axios-site-grid .grid-v:nth-child(3) { left: 66.667%; }
    :where(html.home-page) .axios-site-grid .grid-v:nth-child(4) { right: 0; }

    :where(html.home-page) .axios-site-grid .grid-h {
      left: 0;
      right: 0;
      height: 1px;
      transform: scaleX(0);
      transform-origin: left center;
    }

    :where(html.home-page) .axios-site-grid .grid-h:nth-child(5) { top: 33.333%; }
    :where(html.home-page) .axios-site-grid .grid-h:nth-child(6) { top: 66.667%; }

    :where(html.home-page) body.axios-grid-ready .axios-site-grid .grid-v {
      transform: scaleY(1);
      transition: transform .9s cubic-bezier(.16, 1, .3, 1) 80ms;
    }

    :where(html.home-page) body.axios-grid-ready .axios-site-grid .grid-v:nth-child(2) { transition-delay: 140ms; }
    :where(html.home-page) body.axios-grid-ready .axios-site-grid .grid-v:nth-child(3) { transition-delay: 200ms; }
    :where(html.home-page) body.axios-grid-ready .axios-site-grid .grid-v:nth-child(4) { transition-delay: 260ms; }

    :where(html.home-page) body.axios-grid-ready .axios-site-grid .grid-h {
      transform: scaleX(1);
      transition: transform .9s cubic-bezier(.16, 1, .3, 1);
    }

    :where(html.home-page) body.axios-grid-ready .axios-site-grid .grid-h:nth-child(6) {
      transition-delay: 60ms;
    }

    html:where(.home-page),
    :where(html.home-page) body {
      overflow-x: clip !important;
    }

    /* Figma services: one construction grid, with lines drawn before content. */
    :where(html.home-page) .services {
      position: relative !important;
      z-index: 19 !important;
      isolation: isolate !important;
      padding: 0 0 140px !important;
      background: #f4f5f7 !important;
    }

    :where(html.home-page) .services .services-inner {
      width: calc(100vw - (var(--grid-margin) * 2)) !important;
      max-width: none !important;
      margin: 0 auto !important;
    }

    :where(html.home-page) .services .eyebrow {
      display: flex !important;
      align-items: center !important;
      height: 88px !important;
      margin: 0 !important;
      color: #173db8 !important;
      font: 400 14px/1.3 var(--font-mono) !important;
    }

    :where(html.home-page) .services .bento-grid {
      position: relative !important;
      display: grid !important;
      grid-template-columns: minmax(0, 580fr) minmax(0, 597fr) minmax(0, 580fr) !important;
      grid-template-rows: repeat(2, 560px) !important;
      gap: 0 !important;
      width: 100% !important;
      overflow: hidden !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
    }

    :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small {
      position: relative !important;
      display: block !important;
      width: auto !important;
      min-height: 560px !important;
      margin: 0 !important;
      padding: 34px 36px 34px !important;
      overflow: hidden !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      opacity: 1 !important;
      transform: none !important;
      transition: background-color .28s ease, color .28s ease !important;
    }

    :where(html.home-page) .services .service-card.reveal-target,
    :where(html.home-page) .services .service-card.reveal-target.is-revealed {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
    }

    :where(html.home-page) .services .service-card__border-svg,
    :where(html.home-page) .services .service-card__border { display: none !important; }
    :where(html.home-page) .services .service-card::after { display: none !important; }

    :where(html.home-page) .services .service-card:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
    :where(html.home-page) .services .service-card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
    :where(html.home-page) .services .service-card:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; }
    :where(html.home-page) .services .service-card:nth-child(4) { grid-column: 3 !important; grid-row: 1 !important; }

    :where(html.home-page) .services .service-content {
      position: relative !important;
      z-index: 2 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-end !important;
      height: 100% !important;
      min-height: 492px !important;
      pointer-events: none;
      transform: translate3d(0, calc(var(--services-reveal-y, 0px) + var(--services-hover-y, 0px)), 0) !important;
    }

    :where(html.home-page) .services .service-card:hover .service-content { --services-hover-y: -4px; }

    :where(html.home-page) .services .service-content > div { order: 2; }
    :where(html.home-page) .services .service-text { order: 3; max-width: 94% !important; margin: 14px 0 0 !important; }
    :where(html.home-page) .services .service-num { display: none !important; }
    :where(html.home-page) .services .service-title {
      margin: 0 !important;
      color: #111215 !important;
      font: 500 clamp(28px, 2.05vw, 38px)/1.05 var(--font-sans) !important;
      letter-spacing: -.035em !important;
      text-transform: none !important;
    }

    :where(html.home-page) .services .service-text {
      color: #555b64 !important;
      font: 400 14px/1.45 var(--font-mono) !important;
    }

    :where(html.home-page) .services .service-visual {
      position: absolute !important;
      z-index: 1 !important;
      left: 50% !important;
      top: 9% !important;
      width: min(300px, 66%) !important;
      height: min(340px, 58%) !important;
      object-fit: contain !important;
      transform: translate3d(-50%, 0, 0) !important;
    }

    :where(html.home-page) .services.is-grid-drawn .service-visual {
      transform: translate3d(-50%, 0, 0) !important;
    }

    :where(html.home-page) .services .service-cta {
      --line-delay: 480ms;
      grid-column: 2 / 4 !important;
      grid-row: 2 !important;
      position: relative;
      display: block;
      min-height: 560px;
      overflow: hidden;
      color: #fff;
      background: #0d0d0d;
      text-decoration: none;
      transition: background-color .42s ease .58s;
    }


    :where(html.home-page) .services .service-cta__content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr);
      grid-template-rows: 1fr auto;
      height: 100%;
      min-height: 560px;
      padding: 84px 52px 48px;
    }

    :where(html.home-page) .services .service-cta h3 {
      margin: 0 0 18px;
      color: #fff;
      font: 500 clamp(30px, 3vw, 48px)/1 var(--font-sans);
      letter-spacing: -.045em;
    }

    :where(html.home-page) .services .service-cta p {
      max-width: 540px;
      margin: 0;
      color: rgba(255,255,255,.58);
      font: 400 13px/1.5 var(--font-mono);
    }

    :where(html.home-page) .services .service-cta img {
      grid-column: 2;
      grid-row: 1 / 3;
      align-self: center;
      justify-self: center;
      width: min(300px, 92%);
      max-height: 300px;
      object-fit: contain;
      filter: grayscale(1) brightness(2.2);
      opacity: .72;
    }

    :where(html.home-page) .services .service-cta span {
      align-self: end;
      justify-self: start;
      padding: 13px 18px;
      border-radius: 4px;
      color: #111;
      background: #fff;
      font: 500 12px/1 var(--font-mono);
    }

    :where(html.home-page) .services-grid-lines {
      position: absolute;
      z-index: 6;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    :where(html.home-page) .services-grid-line {
      position: absolute;
      display: block;
      background: rgba(67, 86, 117, .28);
      pointer-events: none;
      will-change: transform;
    }

    :where(html.home-page) .services-grid-line.is-horizontal {
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleX(0);
      transform-origin: left center;
    }

    :where(html.home-page) .services-grid-line.is-vertical {
      top: 0;
      width: 1px;
      height: 100%;
      transform: scaleY(0);
      transform-origin: center top;
    }

    :where(html.home-page) .services-grid-line.line-top { top: 0; }
    :where(html.home-page) .services-grid-line.line-h-1 { top: 50%; }
    :where(html.home-page) .services-grid-line.line-bottom { bottom: 0; }
    :where(html.home-page) .services-grid-line.line-left { left: 0; }
    :where(html.home-page) .services-grid-line.line-v-1 { left: 33.0108%; }
    :where(html.home-page) .services-grid-line.line-v-2 { left: 66.9892%; }
    :where(html.home-page) .services-grid-line.line-right { right: 0; }
    :where(html.home-page) .services-grid-line.is-mobile-divider { display: none; }

    :where(html.home-page) .services .services-reveal-item { will-change: opacity, transform; }
    :where(html.home-page) .services .service-cta__content {
      transform: translate3d(0, var(--services-reveal-y, 0px), 0) !important;
    }

    /* Shared Shift5-like line reveal: the line is present in layout, then drawn once. */
    
    :where(html.home-page) .faq details.axios-line-ready {
      position: relative;
      border-color: transparent !important;
    }

    
    :where(html.home-page) .faq details.axios-line-ready::after {
      content: "" !important;
      position: absolute !important;
      z-index: 5 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: auto !important;
      height: 1px !important;
      border: 0 !important;
      background: rgba(68, 91, 128, .20) !important;
      opacity: 1 !important;
      transform: scaleX(0) !important;
      transform-origin: left center !important;
      transition: transform 1s cubic-bezier(.16, 1, .3, 1) var(--axios-line-delay, 0ms) !important;
      pointer-events: none !important;
    }

    

    :where(html.home-page) .faq details.axios-line-ready:nth-child(2) { --axios-line-delay: 70ms; }
    :where(html.home-page) .faq details.axios-line-ready:nth-child(3) { --axios-line-delay: 140ms; }
    :where(html.home-page) .faq details.axios-line-ready:nth-child(4) { --axios-line-delay: 210ms; }
    :where(html.home-page) .faq details.axios-line-ready:nth-child(5) { --axios-line-delay: 280ms; }

    
    :where(html.home-page) .faq details.axios-line-ready.is-line-drawn::after {
      transform: scaleX(1) !important;
    }

    @media (hover: hover) and (pointer: fine) {
      :where(html.home-page) .services .service-card:hover {
        color: #fff !important;
        background: #0d0d0d !important;
      }
      :where(html.home-page) .services .service-card:hover .service-title,
    :where(html.home-page) .services .service-card:hover .service-text { color: #fff !important; }
      :where(html.home-page) .services .service-card:hover .service-visual { filter: grayscale(1) brightness(2.3); }
    }

    /* Figma stages: a long cinematic field with independently revealed cards. */
    :where(html.home-page) .steps-scanner {
      position: relative !important;
      min-height: 2860px !important;
      height: 2860px !important;
      overflow: hidden !important;
      background: #050914 !important;
      color: #fbfdff !important;
      --color--background: #050914;
      --color--text: #fbfdff;
      --color--muted: rgba(220,230,248,.62);
      --color--line: rgba(132,158,206,.24);
    }

    :where(html.home-page) .steps-scanner .steps-sticky {
      position: relative !important;
      display: block !important;
      grid-template-columns: none !important;
      inset: auto !important;
      top: auto !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      transform: none !important;
      border-radius: 0 !important;
      background: #050914 !important;
    }

    :where(html.home-page) .steps-scanner .steps-scanline,
    :where(html.home-page) .steps-scanner .steps-bottom-progress {
      display: none !important;
    }

    :where(html.home-page) .steps-scanner .steps-heading-zone {
      position: absolute !important;
      z-index: 4 !important;
      left: var(--grid-margin) !important;
      top: 140px !important;
      width: min(468px, calc(100vw - var(--grid-margin) * 2)) !important;
      transform: none !important;
      opacity: 1 !important;
    }

    :where(html.home-page) .steps-intro-tags {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
    }

    :where(html.home-page) .steps-intro-tags span {
      padding: 8px 16px;
      border: 1px solid rgba(220,230,248,.24);
      border-radius: 4px;
      color: rgba(220,230,248,.52);
      font: 400 14px/1.3 var(--font-mono);
    }

    :where(html.home-page) .steps-scanner .steps-kicker {
      margin: 0 0 14px !important;
      color: #3e78d8 !important;
      font: 400 13px/1.3 var(--font-mono) !important;
    }

    :where(html.home-page) .steps-scanner .steps-heading-zone h2 {
      margin: 0 !important;
      color: #fff !important;
      font: 500 clamp(48px, 4.2vw, 64px)/1.05 var(--font-sans) !important;
      letter-spacing: -.04em !important;
      text-transform: none !important;
      opacity: 1 !important;
      transform: none !important;
      clip-path: none !important;
    }

    :where(html.home-page) .steps-intro-copy {
      margin: 15px 0 0;
      color: #cecece;
      font: 400 18px/1.45 var(--font-mono);
    }

    :where(html.home-page) .steps-scanner .steps-stage,
    :where(html.home-page) .steps-scanner .steps-track {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: visible !important;
      transform: none !important;
    }

    :where(html.home-page) .steps-scanner .step {
      position: absolute !important;
      display: block !important;
      width: clamp(405px, 28.125vw, 540px) !important;
      height: clamp(353px, 24.48vw, 470px) !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 30px !important;
      overflow: hidden !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: #1d1e22 !important;
      box-shadow: none !important;
      opacity: 0 !important;
      transform: translate3d(0, 82px, 0) scale(.965) !important;
      transition:
        opacity .8s ease-out,
        transform 1.05s cubic-bezier(.16, 1, .3, 1) !important;
    }

    :where(html.home-page) .steps-scanner .step::before {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 8 !important;
      pointer-events: none !important;
      border: 1px solid #34496f !important;
      background: none !important;
      opacity: 1 !important;
      transform: none !important;
      clip-path: inset(0 100% 100% 0);
      transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1) .12s !important;
    }

    :where(html.home-page) .steps-scanner .step::after {
      display: none !important;
    }

    :where(html.home-page) .steps-scanner .step.is-figma-revealed {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
    }

    :where(html.home-page) .steps-scanner .step.is-step-visible:not(.is-figma-revealed),
    :where(html.home-page) .steps-scanner .step.is-revealed:not(.is-figma-revealed),
    :where(html.home-page) .steps-scanner .step.motion-card-in:not(.is-figma-revealed) {
      opacity: 0 !important;
      transform: translate3d(0, 82px, 0) scale(.965) !important;
    }

    :where(html.home-page) .steps-scanner .step.is-figma-revealed::before {
      clip-path: inset(0 0 0 0);
    }

    :where(html.home-page) .steps-scanner .step:nth-child(1) { left: 34.375vw !important; top: 390px !important; }
    :where(html.home-page) .steps-scanner .step:nth-child(2) { left: 62.5vw !important; top: 920px !important; }
    :where(html.home-page) .steps-scanner .step:nth-child(3) { left: 34.375vw !important; top: 1450px !important; }
    :where(html.home-page) .steps-scanner .step:nth-child(4) { left: 62.5vw !important; top: 1980px !important; }

    :where(html.home-page) .steps-scanner .step-visual {
      display: block !important;
      position: absolute !important;
      z-index: 1 !important;
      left: 50% !important;
      top: 50% !important;
      width: min(200px, 42%) !important;
      height: min(200px, 42%) !important;
      transform: translate(-50%, -50%) !important;
      opacity: .92 !important;
    }

    :where(html.home-page) .steps-scanner .step-marker {
      position: absolute !important;
      z-index: 2 !important;
      left: 30px !important;
      top: 30px !important;
      color: #5e6162 !important;
      font: 400 15px/1 var(--font-mono) !important;
    }

    :where(html.home-page) .steps-scanner .step h3 {
      position: absolute !important;
      z-index: 2 !important;
      left: auto !important;
      right: 30px !important;
      top: 30px !important;
      width: calc(100% - 110px) !important;
      margin: 0 !important;
      color: #bec5d2 !important;
      font: 400 clamp(17px, 1.05vw, 20px)/1.08 var(--font-sans) !important;
      text-align: right !important;
      text-transform: uppercase !important;
    }

    :where(html.home-page) .steps-scanner .step p {
      position: absolute !important;
      z-index: 2 !important;
      left: 30px !important;
      bottom: 30px !important;
      width: min(340px, calc(100% - 60px)) !important;
      margin: 0 !important;
      color: #696b6b !important;
      font: 400 14px/1.5 var(--font-mono) !important;
    }

    @media (max-width: 1024px) {
      :where(html.home-page) .axios-site-grid {
        inset-inline: 20px;
      }

      :where(html.home-page) .services {
        padding: 84px 20px 104px !important;
      }

      :where(html.home-page) .services .services-inner {
        width: 100% !important;
        max-width: none !important;
      }

      :where(html.home-page) .services .bento-grid {
        display: block !important;
      }

      :where(html.home-page) .services-grid-lines { display: block !important; }
      :where(html.home-page) .services-grid-line.is-vertical,
    :where(html.home-page) .services-grid-line.line-h-1 { display: none !important; }
      :where(html.home-page) .services-grid-line.is-mobile-divider { display: block; }
      :where(html.home-page) .services-grid-line.line-mobile-h-1 { top: 20%; }
      :where(html.home-page) .services-grid-line.line-mobile-h-2 { top: 40%; }
      :where(html.home-page) .services-grid-line.line-mobile-h-3 { top: 60%; }
      :where(html.home-page) .services-grid-line.line-mobile-h-4 { top: 80%; }

      :where(html.home-page) .services .service-card,
    :where(html.home-page) .services .service-card.big,
    :where(html.home-page) .services .service-card.small,
    :where(html.home-page) .services .service-card:nth-child(n),
    :where(html.home-page) .services .service-cta {
        display: block !important;
        width: 100% !important;
        min-height: 380px !important;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
      }

      :where(html.home-page) .services .service-cta__content {
        grid-template-columns: 1fr !important;
        min-height: 380px !important;
        padding: 38px 28px !important;
      }

      :where(html.home-page) .services .service-content {
        min-height: 328px !important;
      }

      :where(html.home-page) .services .service-cta img {
        position: absolute;
        right: 20px;
        bottom: 22px;
        width: 150px;
        opacity: .42;
      }

      :where(html.home-page) .steps-scanner {
        height: auto !important;
        min-height: 0 !important;
        padding: 88px 20px !important;
      }

      :where(html.home-page) .steps-scanner .steps-sticky,
    :where(html.home-page) .steps-scanner .steps-stage,
    :where(html.home-page) .steps-scanner .steps-track {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
      }

      :where(html.home-page) .steps-scanner .steps-heading-zone {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        margin-bottom: 56px !important;
      }

      :where(html.home-page) .steps-scanner .steps-track {
        display: grid !important;
        gap: 18px !important;
      }

      :where(html.home-page) .steps-scanner .step,
    :where(html.home-page) .steps-scanner .step:nth-child(n) {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 390px !important;
        opacity: 1 !important;
        transform: none !important;
      }

      :where(html.home-page) .steps-scanner .step.is-step-visible:not(.is-figma-revealed),
    :where(html.home-page) .steps-scanner .step.is-revealed:not(.is-figma-revealed),
    :where(html.home-page) .steps-scanner .step.motion-card-in:not(.is-figma-revealed) {
        opacity: 1 !important;
        transform: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :where(html.home-page) .axios-site-grid,
    :where(html.home-page) .services .service-card.reveal-target,
    :where(html.home-page) .services-grid-line,
    :where(html.home-page) .steps-scanner .step,
    :where(html.home-page) .steps-scanner .step::before {
        transition: none !important;
      }

      :where(html.home-page) .axios-site-grid > i { transform: none !important; transition: none !important; }
      :where(html.home-page) .services-grid-line { transform: none !important; }
      :where(html.home-page) .steps-scanner .step { opacity: 1 !important; transform: none !important; }
      :where(html.home-page) .steps-scanner .step::before { clip-path: none !important; }
    }


/* Axio hero + header (homepage) */
.axio-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  padding: 0 var(--axio-page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  pointer-events: none;
  transform: translateY(0);
  filter: blur(0);
  transition:
    transform var(--duration-slow) var(--ease-premium),
    filter .48s var(--ease-premium),
    background-color var(--duration-base) var(--ease-standard);
  animation: axio-header-enter .9s .05s var(--ease-premium) both;
  will-change: transform, filter;
}

.axio-header.is-hidden {
  transform: translateY(-112%);
  filter: blur(9px);
}

.axio-header.is-scrolled {
  background: var(--color-header-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.axio-header a,
.axio-header button { pointer-events: auto; }

.axio-wordmark {
  position: relative;
  text-decoration: none;
  font-size: clamp(20px, 1.65vw, 27px);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -.075em;
}

.axio-nav { display: flex; align-items: center; gap: clamp(20px, 2.35vw, 38px); }
.axio-nav a {
  text-decoration: none;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: -.02em;
  transition: opacity var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.axio-nav > a:not(.axio-contact) { position: relative; }
.axio-nav > a:not(.axio-contact)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--axio-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s var(--ease-premium);
}
.axio-nav > a:not(.axio-contact):hover,
.axio-nav > a:not(.axio-contact):focus-visible { color: var(--axio-blue); opacity: 1; }
.axio-nav > a:not(.axio-contact):hover::after,
.axio-nav > a:not(.axio-contact):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.axio-contact {
  padding: 13px 21px;
  border-radius: var(--radius-pill);
  background: var(--color-black);
  color: var(--color-white);
}
.axio-contact:hover,
.axio-contact:focus-visible { background: var(--axio-blue); color: var(--color-white); }
.axio-menu-button { display: none; }

.axio-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: var(--hero-min-height);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-white);
  touch-action: pan-y;
}

.axio-reveal,
.no-webgl .axio-hero::before {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.no-webgl .axio-hero::before {
  content: '';
  background: url('../axio-hero-tablet-blue.jpg') center / cover no-repeat;
  clip-path: circle(0 at var(--fallback-x, 50%) var(--fallback-y, 48%));
  transition: clip-path .45s var(--ease-premium);
}
.no-webgl .axio-hero:hover::before { clip-path: circle(26vmin at 50% 48%); }

.axio-copy {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  padding: 0 max(18px, 4vw) 5.6vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.axio-copy h1 {
  width: min(880px, 54vw);
  margin: 0;
  font-size: clamp(52px, 5.15vw, 84px);
  font-weight: var(--font-weight-medium);
  line-height: .97;
  letter-spacing: -.01em;
}
.axio-copy h1 span { display: block; }
.axio-copy p {
  margin: clamp(25px, 3.2vh, 38px) auto 0;
  max-width: 510px;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  line-height: 1.28;
  letter-spacing: .025em;
}

.axio-copy:not(.axio-copy--inverse) h1,
.axio-copy:not(.axio-copy--inverse) p,
.axio-copy--inverse h1,
.axio-copy--inverse p {
  animation: axio-copy-enter var(--duration-reveal) .08s var(--ease-premium) both;
}

.axio-copy--inverse {
  z-index: 7;
  color: var(--color-white);
  opacity: var(--reveal-opacity, 0);
  animation: none;
  -webkit-mask-image:
    radial-gradient(ellipse 33.5vmin 21.5vmin at var(--copy-mask-x, 50%) var(--copy-mask-y, 50%), var(--color-black) 94%, transparent 100%),
    radial-gradient(ellipse 15vmin 11vmin at var(--copy-trail-one-x, 50%) var(--copy-trail-one-y, 50%), var(--color-black) 92%, transparent 100%),
    radial-gradient(ellipse 8vmin 6vmin at var(--copy-trail-two-x, 50%) var(--copy-trail-two-y, 50%), var(--color-black) 90%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 33.5vmin 21.5vmin at var(--copy-mask-x, 50%) var(--copy-mask-y, 50%), var(--color-black) 94%, transparent 100%),
    radial-gradient(ellipse 15vmin 11vmin at var(--copy-trail-one-x, 50%) var(--copy-trail-one-y, 50%), var(--color-black) 92%, transparent 100%),
    radial-gradient(ellipse 8vmin 6vmin at var(--copy-trail-two-x, 50%) var(--copy-trail-two-y, 50%), var(--color-black) 90%, transparent 100%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

.axio-hint {
  position: absolute;
  z-index: 8;
  left: var(--axio-page-x);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--color-copy-muted);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .02em;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.axio-hint-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--axio-blue); }
.axio-touch-label { display: none; }
.axio-hero.is-revealing .axio-hint { opacity: 0; }

.axio-cursor {
  --cursor-x: -40px;
  --cursor-y: -40px;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background: var(--color-white);
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--cursor-x) - 11px), calc(var(--cursor-y) - 11px), 0) scale(1);
  transition: opacity .2s var(--ease-standard), width .28s var(--ease-premium), height .28s var(--ease-premium), margin .28s var(--ease-premium), transform .12s var(--ease-standard);
  will-change: transform;
}
.axio-cursor.is-visible { opacity: 1; }
.axio-cursor.is-active { width: 48px; height: 48px; margin: -13px 0 0 -13px; }
.axio-cursor.is-pressed { transform: translate3d(calc(var(--cursor-x) - 11px), calc(var(--cursor-y) - 11px), 0) scale(.72); }

@media (pointer: fine) {
  .has-axio-cursor,
  .has-axio-cursor body,
  .has-axio-cursor a,
  .has-axio-cursor button { cursor: none !important; }
}

@keyframes axio-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes axio-header-enter {
  from { opacity: 0; transform: translateY(-105%); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes axio-copy-enter {
  from { transform: translateY(30px); filter: blur(8px); }
  to { transform: translateY(0); filter: blur(0); }
}

@media (max-width: 760px) {
  .axio-header { height: var(--header-height-mobile); }
  .axio-cursor { display: none !important; }
  .axio-wordmark { font-size: 23px; }
  .axio-menu-button {
    display: block;
    padding: 10px 15px;
    border: 1px solid var(--color-black);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-black);
    font-size: 12px;
  }
  .axio-nav {
    /* the header has transform/filter, so it is the containing block: size the overlay explicitly */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    background: var(--color-white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s ease;
  }
  .axio-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
  .axio-nav a { font-size: 28px; letter-spacing: -.05em; }
  .axio-contact { margin-top: 6px; font-size: 17px !important; }
  .axio-hero { min-height: var(--hero-min-height-mobile); }
  .axio-copy { width: 100%; padding: 0 18px 7vh; }
  .axio-copy h1 { width: 100%; font-size: clamp(38px, 10.5vw, 48px); line-height: .96; }
  .axio-copy p { max-width: 350px; margin-top: 24px; font-size: 16px; line-height: 1.3; }
  .desktop-break { display: none; }
  .axio-hint { left: 50%; bottom: 23px; transform: translateX(-50%); white-space: nowrap; }
  .axio-copy--inverse {
    -webkit-mask-image: radial-gradient(ellipse 46vmin 35vmin at var(--copy-mask-x, 50%) var(--copy-mask-y, 50%), var(--color-black) 92%, transparent 100%);
    mask-image: radial-gradient(ellipse 46vmin 35vmin at var(--copy-mask-x, 50%) var(--copy-mask-y, 50%), var(--color-black) 92%, transparent 100%);
  }
}

@media (pointer: coarse) {
  .axio-pointer-label { display: none; }
  .axio-touch-label { display: inline; }
  .axio-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .axio-header, .axio-header *, .axio-hero, .axio-hero *, .axio-cursor { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .axio-hint { display: none; }
}

/* Service detail pages (service-ux-ui / service-marketing / service-development / service-analytics) */
body.service-page {
  margin: 0;
  overflow-x: hidden;
  color: var(--service-ink);
  background: var(--service-surface);
  font-family: Manrope, sans-serif;
}
.service-page *, .service-page *::before, .service-page *::after { box-sizing: border-box; }
.service-page .site-header {
  color: #fbfdff;
  background: rgba(5, 9, 20, .22);
  border-bottom: 1px solid rgba(220, 230, 248, .14);
  backdrop-filter: blur(18px);
}
.service-page .site-header a { color: inherit; }

.service-hero {
  position: relative;
  min-height: 100svh;
  padding: 152px max(80px, 5vw) 72px;
  color: #fbfdff;
  background:
    radial-gradient(circle at 72% 43%, rgba(121, 166, 244, .28), transparent 24%),
    linear-gradient(145deg, #050914 0%, #0a2449 56%, #173db8 100%);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: end;
  overflow: hidden;
}
.service-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.service-hero__index,
.service-hero__title,
.service-hero__lead,
.service-hero__visual { position: relative; z-index: 1; }
.service-hero__index {
  grid-column: 1 / 4;
  align-self: start;
  margin: 0;
  color: var(--service-soft);
  font: 400 12px/1.4 "Roboto Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.service-hero__title { grid-column: 1 / 10; margin: 0; align-self: end; }
.service-hero h1 {
  margin: 0;
  max-width: 1280px;
  font-size: clamp(62px, 8.2vw, 156px);
  line-height: .84;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.service-hero__lead {
  grid-column: 9 / 13;
  margin: 0;
  max-width: 440px;
  color: rgba(251, 253, 255, .7);
  font: 400 15px/1.55 "Roboto Mono", monospace;
}
.service-hero__visual {
  position: absolute;
  top: 50%;
  right: 7vw;
  width: clamp(260px, 34vw, 620px);
  aspect-ratio: 1;
  object-fit: contain;
  transform: translateY(-54%);
  opacity: .82;
  filter: drop-shadow(0 28px 70px rgba(2, 110, 237, .22));
}
.service-hero__scroll {
  position: absolute;
  z-index: 2;
  left: max(80px, 5vw);
  bottom: 28px;
  color: rgba(251, 253, 255, .58);
  text-decoration: none;
  font: 400 11px/1 "Roboto Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-intro,
.service-deliverables,
.service-process,
.service-proof,
.service-next { padding: clamp(100px, 12vw, 220px) max(80px, 5vw); }
.service-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.service-kicker {
  grid-column: 1 / 3;
  margin: 8px 0 0;
  color: var(--service-deep);
  font: 400 12px/1.4 "Roboto Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.service-intro h2 {
  grid-column: 3 / 13;
  margin: 0;
  font-size: clamp(46px, 5.4vw, 98px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 500;
}
.service-intro__note {
  grid-column: 8 / 13;
  margin: 64px 0 0;
  color: var(--service-muted);
  font: 400 15px/1.6 "Roboto Mono", monospace;
}

.service-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--service-line);
  border-bottom: 1px solid var(--service-line);
}
.service-outcome {
  min-height: 360px;
  padding: 36px max(28px, 4vw) 42px;
  border-right: 1px solid var(--service-line);
  display: flex;
  flex-direction: column;
}
.service-outcome:last-child { border-right: 0; }
.service-outcome small { color: var(--service-deep); font: 400 12px/1 "Roboto Mono", monospace; }
.service-outcome h3 { margin: auto 0 24px; font-size: clamp(32px, 3.2vw, 58px); line-height: .96; letter-spacing: -.05em; }
.service-outcome p { margin: 0; color: var(--service-muted); font: 400 14px/1.5 "Roboto Mono", monospace; }

.service-deliverables { background: #fff; }
.service-section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: clamp(70px, 8vw, 140px);
}
.service-section-head p { grid-column: 1 / 4; }
.service-section-head h2 {
  grid-column: 4 / 13;
  margin: 0;
  font-size: clamp(52px, 7vw, 126px);
  line-height: .88;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.service-deliverables__grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--service-line); }
.service-deliverable {
  min-height: 210px;
  padding: 30px 32px 34px 0;
  border-bottom: 1px solid var(--service-line);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  align-content: center;
}
.service-deliverable:nth-child(odd) { border-right: 1px solid var(--service-line); }
.service-deliverable:nth-child(even) { padding-left: 32px; }
.service-deliverable span { color: var(--service-deep); font: 400 12px/1.2 "Roboto Mono", monospace; }
.service-deliverable h3 { margin: 0 0 16px; font-size: clamp(25px, 2.2vw, 40px); line-height: 1; letter-spacing: -.04em; }
.service-deliverable p { margin: 0; color: var(--service-muted); font: 400 14px/1.5 "Roboto Mono", monospace; }

.service-process { color: #fbfdff; background: var(--service-dark); }
.service-process .service-kicker { color: var(--service-soft); }
.service-process .service-section-head { margin-bottom: 80px; }
.service-process__list { border-top: 1px solid rgba(220, 230, 248, .14); }
.service-process__item {
  display: grid;
  grid-template-columns: 100px 1fr minmax(280px, 520px);
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(220, 230, 248, .14);
  align-items: start;
}
.service-process__item span { color: var(--service-soft); font: 400 12px/1.4 "Roboto Mono", monospace; }
.service-process__item h3 { margin: 0; font-size: clamp(30px, 3vw, 56px); line-height: .95; letter-spacing: -.045em; }
.service-process__item p { margin: 0; color: #98a1b1; font: 400 14px/1.55 "Roboto Mono", monospace; }

.service-proof { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: center; }
.service-proof__copy { grid-column: 1 / 6; }
.service-proof__copy h2 { margin: 0 0 32px; font-size: clamp(46px, 5.6vw, 104px); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.service-proof__copy p { max-width: 540px; margin: 0; color: var(--service-muted); font: 400 15px/1.6 "Roboto Mono", monospace; }
.service-proof__media { grid-column: 7 / 13; min-height: 580px; padding: 38px; background: #e9edf2; display: grid; place-items: center; overflow: hidden; }
.service-proof__media img { width: 100%; height: 100%; max-height: 620px; object-fit: contain; transition: transform .9s var(--service-ease); }
.service-proof__media:hover img { transform: scale(1.025); }

.service-next { padding-block: clamp(90px, 10vw, 170px); background: #fff; }
.service-next__label { margin: 0 0 28px; color: var(--service-deep); font: 400 12px/1.4 "Roboto Mono", monospace; text-transform: uppercase; }
.service-next__link { color: var(--service-ink); text-decoration: none; display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.service-next__link strong { max-width: 1200px; font-size: clamp(48px, 7.3vw, 136px); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; }
.service-next__link span { width: 68px; height: 68px; border: 1px solid var(--service-line); display: grid; place-items: center; font-size: 30px; transition: color .3s, background-color .3s; }
.service-next__link:hover span { color: #fff; background: var(--service-accent); }

.service-reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--service-ease), transform .9s var(--service-ease); }
.service-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .service-hero { min-height: 100svh; padding: 112px 24px 48px; gap: 18px; }
  .service-hero__index, .service-hero__title, .service-hero__lead { grid-column: 1 / -1; }
  .service-hero__title { align-self: end; }
  .service-hero h1 { font-size: clamp(52px, 16vw, 88px); }
  .service-hero__lead { margin-top: 24px; max-width: 100%; }
  .service-hero__visual { width: 80vw; right: -24vw; top: 38%; opacity: .44; }
  .service-hero__scroll { left: 24px; }
  .service-intro, .service-deliverables, .service-process, .service-proof, .service-next { padding-inline: 24px; }
  .service-kicker, .service-intro h2, .service-intro__note, .service-section-head p, .service-section-head h2, .service-proof__copy, .service-proof__media { grid-column: 1 / -1; }
  .service-intro__note { margin-top: 28px; }
  .service-outcomes, .service-deliverables__grid { grid-template-columns: 1fr; }
  .service-outcome { min-height: 270px; border-right: 0; border-bottom: 1px solid var(--service-line); }
  .service-outcome:last-child { border-bottom: 0; }
  .service-deliverable:nth-child(odd) { border-right: 0; }
  .service-deliverable:nth-child(even) { padding-left: 0; }
  .service-process__item { grid-template-columns: 48px 1fr; }
  .service-process__item p { grid-column: 2; }
  .service-proof { gap: 52px; }
  .service-proof__media { min-height: auto; aspect-ratio: 4 / 3; padding: 20px; }
  .service-next__link { align-items: center; }
  .service-next__link span { width: 52px; height: 52px; flex: 0 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .service-reveal { opacity: 1; transform: none; transition: none; }
  .service-proof__media img { transition: none; }
}

/* Case study page: shared case layout (kubanstroy-case.css) */
html.is-kubanstroy main#caseMain,
html.is-kubanstroy .default-case-main { display: none; }
html:not(.is-kubanstroy) #kubanCase { display: none; }
html.is-kubanstroy { background: #fff; }
html.is-kubanstroy body.case-page { color: var(--case-ink); background: #fff; overflow-x: clip; }
html.is-kubanstroy body.case-page::after { opacity: .015; }
html.is-kubanstroy .case-nav { display: none; }

.case-study,
.case-study * { box-sizing: border-box; }
.case-study { position: relative; z-index: 1; width: 100%; color: var(--case-ink); background: #fff; font-family: var(--font-sans, Manrope, Arial, sans-serif); }
.case-study img { max-width: 100%; }
.case-study h1,
.case-study h2,
.case-study h3,
.case-study p,
.case-study figure,
.case-study dl,
.case-study ol,
.case-study ul { margin-top: 0; }
.case-study h1,
.case-study h2,
.case-study h3 { letter-spacing: -.05em; text-wrap: balance; }
.case-study__section { position: relative; }
.case-study__shell { width: min(calc(100% - var(--case-margin) * 2), 1760px); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--case-gap); }
.case-study__label { margin: 0; color: var(--case-blue); font: 500 clamp(10px, .7vw, 12px)/1.35 var(--font-mono, "Roboto Mono", monospace); text-transform: uppercase; letter-spacing: 0; }

html.is-kubanstroy .site-header { color: #fff; background: transparent; transition: color .35s ease, background-color .35s ease, border-color .35s ease; }
html.is-kubanstroy .site-header::after { border-color: rgba(255,255,255,.25); }
html.is-kubanstroy .site-header .button { color: var(--case-ink); background: #fff; border-color: #fff; }
html.is-kubanstroy body.kuban-header-light .site-header { color: var(--case-ink); background: rgba(255,255,255,.9); border-color: rgba(11,12,16,.1); backdrop-filter: blur(14px); }
html.is-kubanstroy body.kuban-header-light .site-header .button { color: #fff; background: var(--case-blue); border-color: var(--case-blue); }

/* Cover */
.case-study__hero { --hero-scale: 1; --hero-title-y: 0px; position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; padding: 120px var(--case-margin) clamp(38px, 5vw, 82px); isolation: isolate; color: #fff; background: #09131d; animation: kubanHeroFrameIn 1.45s cubic-bezier(.16,1,.3,1) both; }
.case-study__hero-media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--hero-scale)); scale: 1.075; transform-origin: 56% 48%; will-change: transform, scale; animation: kubanHeroCameraIn 2.8s cubic-bezier(.16,1,.3,1) both; }
.case-study__hero-overlay { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(2,16,28,.12) 20%, rgba(2,14,24,.18) 48%, rgba(2,10,18,.82) 100%); }
.case-study__hero-meta { position: absolute; top: clamp(92px, 9vw, 150px); left: var(--case-margin); right: var(--case-margin); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--case-gap); padding-top: 14px; border-top: 1px solid rgba(255,255,255,.34); font: 500 clamp(9px, .68vw, 12px)/1.35 var(--font-mono, "Roboto Mono", monospace); animation: kubanHeroUiIn .9s .36s cubic-bezier(.16,1,.3,1) both; }
.case-study__hero-meta span:last-child { text-align: right; }
.case-study__hero-title { width: 100%; transform: translate3d(0, var(--hero-title-y), 0); will-change: transform; animation: kubanHeroTitleIn 1.1s .48s cubic-bezier(.16,1,.3,1) both; }
.case-study__hero-title p { max-width: 650px; margin: 0 0 22px; font-size: clamp(16px, 1.35vw, 25px); line-height: 1.25; }
.case-study__hero h1 { margin: 0; font-size: clamp(68px, 11.3vw, 216px); font-weight: 600; line-height: .78; letter-spacing: -.075em; white-space: nowrap; }

@keyframes kubanHeroFrameIn {
  from { clip-path: inset(4.5vh 3.5vw round 18px); }
  to { clip-path: inset(0 round 0); }
}

@keyframes kubanHeroCameraIn {
  from { scale: 1; filter: saturate(.88) brightness(.82); }
  to { scale: 1.075; filter: saturate(1) brightness(1); }
}

@keyframes kubanHeroUiIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes kubanHeroTitleIn {
  from { opacity: 0; transform: translate3d(0, calc(var(--hero-title-y) + 64px), 0); }
  to { opacity: 1; transform: translate3d(0, var(--hero-title-y), 0); }
}

/* Overview */
.case-study__overview { padding: clamp(120px, 12vw, 230px) 0; background: #fff; }
.case-study__overview-copy { grid-column: 1 / span 8; }
.case-study__overview h2 { max-width: 1250px; margin: 34px 0 48px; font-size: clamp(54px, 6.8vw, 122px); font-weight: 500; line-height: .9; }
.case-study__overview-copy > p:last-child { max-width: 860px; margin-bottom: 0; color: var(--case-muted); font-size: clamp(18px, 1.35vw, 25px); line-height: 1.55; }
.case-study__passport { grid-column: 10 / -1; align-self: end; margin: 0; border-top: 1px solid var(--case-line); }
.case-study__passport div { padding: 20px 0; border-bottom: 1px solid var(--case-line); }
.case-study__passport dt { margin-bottom: 7px; color: var(--case-blue); font: 500 10px/1.35 var(--font-mono, "Roboto Mono", monospace); text-transform: uppercase; }
.case-study__passport dd { margin: 0; font-size: 15px; line-height: 1.45; }

/* Tasks and solutions */
.case-study__brief { padding: clamp(110px, 11vw, 210px) 0; background: var(--case-surface); }
.case-study__brief > .case-study__shell > .case-study__label { grid-column: 1 / span 3; }
.case-study__brief h2 { grid-column: 4 / -1; margin: 0; font-size: clamp(58px, 7.5vw, 136px); font-weight: 500; line-height: .88; }
.case-study__brief-grid { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--case-gap); margin-top: clamp(75px, 8vw, 145px); }
.case-study__brief-column { padding-top: 24px; border-top: 1px solid var(--case-ink); }
.case-study__brief-column h3 { margin: 0 0 36px; font-size: clamp(26px, 2.3vw, 42px); font-weight: 500; }
.case-study__brief-column ol { margin: 0; padding: 0; list-style: none; counter-reset: brief; }
.case-study__brief-column li { position: relative; min-height: 105px; padding: 22px 0 22px 54px; border-top: 1px solid var(--case-line); color: var(--case-muted); font-size: clamp(15px, 1vw, 18px); line-height: 1.5; }
.case-study__brief-column li::before { counter-increment: brief; content: "0" counter(brief); position: absolute; top: 24px; left: 0; color: var(--case-blue); font: 500 10px/1.35 var(--font-mono, "Roboto Mono", monospace); }

/* Process */
.case-study__process { padding: clamp(120px, 12vw, 230px) 0; color: #fbfdff; background: var(--case-dark); }
.case-study__process .case-study__label { color: #79a6f4; }
.case-study__process-head { grid-column: 1 / span 5; position: sticky; top: 120px; align-self: start; }
.case-study__process-head h2 { margin: 34px 0 0; font-size: clamp(58px, 6.5vw, 118px); font-weight: 500; line-height: .9; }
.case-study__process-list { grid-column: 7 / -1; border-top: 1px solid var(--case-dark-line); }
.case-study__process-list article { display: grid; grid-template-columns: 60px minmax(0, .75fr) minmax(220px, 1fr); gap: 26px; padding: clamp(40px, 5vw, 85px) 0; border-bottom: 1px solid var(--case-dark-line); }
.case-study__process-list span { color: #79a6f4; font: 500 10px/1.4 var(--font-mono, "Roboto Mono", monospace); }
.case-study__process-list h3 { margin: 0; font-size: clamp(24px, 2.1vw, 38px); font-weight: 500; line-height: 1.05; }
.case-study__process-list p { margin: 0; color: var(--case-dark-muted); font-size: 16px; line-height: 1.55; }

/* Site map */
.case-study__pages { padding: clamp(115px, 11vw, 210px) 0; background: #fff; }
.case-study__pages > .case-study__shell > .case-study__label { grid-column: 1 / span 3; }
.case-study__pages h2 { grid-column: 4 / -1; margin: 0; font-size: clamp(58px, 7vw, 128px); font-weight: 500; line-height: .9; }
.case-study__page-list { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(80px, 9vw, 160px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--case-line); }
.case-study__page-list li { padding: 25px 0; border-bottom: 1px solid var(--case-line); font-size: clamp(22px, 2vw, 36px); }
.case-study__page-list li:nth-child(odd) { padding-right: 24px; }
.case-study__page-list li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--case-line); }

/* Detailed screens */
.case-study__feature { padding: clamp(110px, 11vw, 210px) 0; background: #fff; }
.case-study__feature + .case-study__feature { border-top: 1px solid var(--case-line); }
.case-study__feature-head > .case-study__label { grid-column: 1 / span 3; }
.case-study__feature-head > div { grid-column: 4 / -1; }
.case-study__feature h2 { max-width: 1250px; margin: 0 0 38px; font-size: clamp(54px, 6.8vw, 122px); font-weight: 500; line-height: .9; }
.case-study__feature p { max-width: 720px; margin-bottom: 0; color: var(--case-muted); font-size: clamp(16px, 1.05vw, 20px); line-height: 1.6; }
.case-study__feature-media { width: min(calc(100% - var(--case-margin) * 2), 1760px); margin: clamp(70px, 8vw, 145px) auto 0; overflow: hidden; background: var(--case-surface); }
.case-study__feature-media img { width: 100%; height: auto; display: block; }
.case-study__feature--split > .case-study__shell,
.case-study__feature--reverse > .case-study__shell { align-items: center; }
.case-study__feature-copy { grid-column: 1 / span 5; }
.case-study__feature-copy h2 { margin: 30px 0 36px; font-size: clamp(48px, 5.4vw, 98px); }
.case-study__feature-copy ul { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--case-line); }
.case-study__feature-copy li { padding: 17px 0; border-bottom: 1px solid var(--case-line); font: 500 12px/1.4 var(--font-mono, "Roboto Mono", monospace); }
.case-study__feature-figure { grid-column: 7 / -1; margin: 0; overflow: hidden; background: var(--case-surface); }
.case-study__feature-figure img { width: 100%; height: auto; display: block; object-fit: contain; }
.case-study__feature--reverse .case-study__feature-figure { grid-column: 1 / span 7; }
.case-study__feature--reverse .case-study__feature-copy { grid-column: 9 / -1; }

/* Facts and outcome */
.case-study__facts { padding: clamp(110px, 11vw, 210px) 0; background: var(--case-surface); }
.case-study__facts > .case-study__shell > .case-study__label { grid-column: 1 / span 3; }
.case-study__facts h2 { grid-column: 4 / -1; margin: 0; font-size: clamp(58px, 7vw, 128px); font-weight: 500; line-height: .9; }
.case-study__facts-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(80px, 9vw, 160px) 0 0; border-top: 1px solid var(--case-line); border-left: 1px solid var(--case-line); }
.case-study__facts-grid div { min-height: 260px; padding: 30px; border-right: 1px solid var(--case-line); border-bottom: 1px solid var(--case-line); }
.case-study__facts-grid dt { margin-bottom: 45px; color: var(--case-blue); font-size: clamp(48px, 6vw, 110px); font-weight: 500; letter-spacing: -.06em; }
.case-study__facts-grid dd { max-width: 260px; margin: 0; color: var(--case-muted); font-size: 16px; line-height: 1.5; }
.case-study__outcome { min-height: 88svh; display: flex; align-items: center; padding: clamp(120px, 12vw, 230px) 0; color: #fff; background: linear-gradient(145deg, var(--case-blue) 0%, var(--case-blue-deep) 55%, #050914 100%); }
.case-study__outcome .case-study__label { grid-column: 1 / span 3; color: rgba(255,255,255,.65); }
.case-study__outcome h2 { grid-column: 3 / -1; margin: 0; font-size: clamp(58px, 8vw, 146px); font-weight: 500; line-height: .86; }
.case-study__outcome .case-study__shell > p:last-child { grid-column: 8 / -1; margin: 58px 0 0; color: rgba(255,255,255,.72); font-size: clamp(16px, 1.1vw, 20px); line-height: 1.6; }

/* Deliverables, CTA, next */
.case-study__deliverables { padding: clamp(120px, 12vw, 230px) 0; background: #fff; }
.case-study__deliverables .case-study__label { grid-column: 1 / span 3; }
.case-study__deliverables h2 { grid-column: 4 / span 6; margin: 0; font-size: clamp(62px, 8vw, 146px); font-weight: 500; line-height: .85; }
.case-study__deliverables-list { grid-column: 4 / -1; margin-top: clamp(80px, 9vw, 160px); border-top: 1px solid var(--case-line); }
.case-study__deliverables-list p { display: grid; grid-template-columns: 80px 1fr; margin: 0; padding: 28px 0; border-bottom: 1px solid var(--case-line); font-size: clamp(24px, 2.2vw, 40px); line-height: 1.15; }
.case-study__deliverables-list span { color: var(--case-blue); font: 500 11px/1.5 var(--font-mono, "Roboto Mono", monospace); }
.case-study__cta { min-height: 88svh; display: flex; align-items: center; padding: clamp(120px, 12vw, 220px) 0; background: #fff; }
.case-study__cta .case-study__label { grid-column: 1 / span 3; }
.case-study__cta h2 { grid-column: 3 / -1; margin: 0; font-size: clamp(62px, 8.2vw, 150px); font-weight: 500; line-height: .86; }
.case-study__cta-link { grid-column: 9 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 75px; padding: 22px 0; border-block: 1px solid var(--case-ink); color: inherit; font-size: 18px; text-decoration: none; }
.case-study__cta-link span { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.case-study__cta-link:hover span { transform: translateX(8px); }
.case-study__next { position: relative; min-height: 82svh; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); align-content: end; gap: var(--case-gap); padding: var(--case-margin); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.case-study__next::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.12), rgba(8,8,8,.78)); }
.case-study__next img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.case-study__next:hover img { transform: scale(1.035); }
.case-study__next span { grid-column: 1 / span 3; font: 500 11px/1.4 var(--font-mono, "Roboto Mono", monospace); }
.case-study__next strong { grid-column: 1 / span 10; font-size: clamp(68px, 11vw, 208px); font-weight: 500; line-height: .8; letter-spacing: -.07em; }
.case-study__next b { grid-column: 11 / -1; align-self: end; justify-self: end; font: 500 11px/1.4 var(--font-mono, "Roboto Mono", monospace); }

/* Progressive enhancement */
html.kuban-motion-ready .case-reveal { opacity: 0; transform: translate3d(0, 36px, 0); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
html.kuban-motion-ready .case-media-reveal { opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity .9s ease, clip-path 1.15s cubic-bezier(.16,1,.3,1); }
html.kuban-motion-ready .case-reveal.is-inview { opacity: 1; transform: none; }
html.kuban-motion-ready .case-media-reveal.is-inview { opacity: 1; clip-path: inset(0); }

@media (max-width: 1100px) {
  .case-study__hero-meta { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
  .case-study__hero-meta span:nth-child(even) { text-align: right; }
  .case-study__overview-copy { grid-column: 1 / span 8; }
  .case-study__passport { grid-column: 9 / -1; }
  .case-study__process-head { grid-column: 1 / span 5; }
  .case-study__process-list { grid-column: 6 / -1; }
  .case-study__process-list article { grid-template-columns: 45px 1fr; }
  .case-study__process-list p { grid-column: 2; }
  .case-study__feature-copy { grid-column: 1 / span 6; }
  .case-study__feature-figure { grid-column: 7 / -1; }
  .case-study__feature--reverse .case-study__feature-figure { grid-column: 1 / span 6; }
  .case-study__feature--reverse .case-study__feature-copy { grid-column: 7 / -1; }
}

@media (max-width: 760px) {
  :root { --case-margin: 18px; --case-gap: 12px; }
  .case-study__shell { display: block; }
  .case-study__hero { min-height: 100svh; padding-bottom: 28px; }
  .case-study__hero-meta { top: 82px; left: 18px; right: 18px; grid-template-columns: 1fr 1fr; font-size: 8px; }
  .case-study__hero-meta span:last-child { grid-column: 1 / -1; text-align: left; }
  .case-study__hero-title p { max-width: 290px; margin-bottom: 14px; font-size: 14px; }
  .case-study__hero h1 { font-size: clamp(48px, 13.5vw, 62px); line-height: .86; letter-spacing: -.06em; white-space: normal; }
  .case-study__overview,
  .case-study__brief,
  .case-study__process,
  .case-study__pages,
  .case-study__feature,
  .case-study__facts,
  .case-study__deliverables { padding-block: 88px; }
  .case-study__overview h2,
  .case-study__brief h2,
  .case-study__pages h2,
  .case-study__feature h2,
  .case-study__facts h2,
  .case-study__deliverables h2 { margin-top: 24px; font-size: 12vw; }
  .case-study__passport { margin-top: 65px; }
  .case-study__brief-grid { grid-template-columns: 1fr; margin-top: 65px; }
  .case-study__brief-column + .case-study__brief-column { margin-top: 45px; }
  .case-study__process-head { position: relative; top: auto; }
  .case-study__process-head h2 { font-size: 12vw; }
  .case-study__process-list { margin-top: 65px; }
  .case-study__process-list article { grid-template-columns: 36px 1fr; }
  .case-study__page-list { grid-template-columns: 1fr; margin-top: 60px; }
  .case-study__page-list li:nth-child(even) { padding-left: 0; border-left: 0; }
  .case-study__feature-head > div { margin-top: 24px; }
  .case-study__feature-media { width: calc(100% - 36px); margin-top: 55px; }
  .case-study__feature-copy { margin-bottom: 55px; }
  .case-study__feature--reverse .case-study__feature-copy { margin-top: 55px; margin-bottom: 0; }
  .case-study__facts-grid { grid-template-columns: 1fr; margin-top: 60px; }
  .case-study__facts-grid div { min-height: 210px; }
  .case-study__outcome { min-height: 82svh; padding-block: 95px; }
  .case-study__outcome h2 { margin-top: 25px; font-size: 13vw; }
  .case-study__outcome .case-study__shell > p:last-child { margin-top: 45px; }
  .case-study__deliverables-list { margin-top: 60px; }
  .case-study__deliverables-list p { grid-template-columns: 46px 1fr; padding: 22px 0; font-size: 22px; }
  .case-study__cta { min-height: 80svh; padding-block: 100px; }
  .case-study__cta h2 { margin-top: 25px; font-size: 13vw; }
  .case-study__cta-link { margin-top: 55px; }
  .case-study__next { min-height: 68svh; }
  .case-study__next strong { grid-column: 1 / -1; font-size: 17vw; }
  .case-study__next b { grid-column: 1 / -1; justify-self: start; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-reveal,
  .case-media-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .case-study__hero,
  .case-study__hero-media,
  .case-study__hero-meta,
  .case-study__hero-title { animation: none !important; }
  .case-study__hero-media { scale: 1 !important; transform: none !important; }
  .case-study__hero-title { transform: none !important; }
}

/* Case study page: default case template (case_axi_codex.html inline style) */
    body.case-page {
      --case-bg: #0c0d0e;
      --case-accent: #087cf0;
      margin: 0;
      color: #f7f3ea;
      background: var(--case-bg);
      font-family: var(--font-sans);
      overflow-x: hidden;
    }

    body.case-page::after {
      content: "";
      position: fixed;
      z-index: 9999;
      inset: 0;
      pointer-events: none;
      opacity: .032;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }

    .case-nav {
      position: fixed;
      z-index: 50;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 68px;
      padding: 0 clamp(20px, 5vw, 78px);
      color: #fff;
      mix-blend-mode: difference;
    }

    .case-nav a {
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .case-hero {
      position: relative;
      height: calc(100svh - 68px);
      min-height: 680px;
      margin-top: 68px;
      overflow: hidden;
      isolation: isolate;
      background: #05070b;
    }

    .case-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      filter: contrast(1.04) saturate(.96) brightness(.92);
      transform: scale(1.08);
      animation: caseHeroZoom 12s cubic-bezier(.25, 1, .5, 1) forwards;
    }

    .case-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.44)),
        radial-gradient(circle at 58% 42%, rgba(8,124,240,.08), transparent 44%);
      pointer-events: none;
    }

    .case-hero-content {
      position: absolute;
      z-index: 2;
      inset: auto clamp(20px, 4vw, 76px) clamp(36px, 7vh, 88px);
      animation: caseTitleRise 1.6s cubic-bezier(.16, 1, .3, 1) forwards;
    }

    .case-kicker {
      margin: 0 0 22px;
      font-family: var(--font-mono);
      font-size: 13px;
      color: rgba(255,255,255,.72);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .case-title {
      max-width: 1480px;
      margin: 0;
      color: #fff;
      font-size: clamp(58px, 12vw, 196px);
      font-weight: 700;
      line-height: .78;
      letter-spacing: -.075em;
      text-transform: uppercase;
      mix-blend-mode: difference;
      animation: none;
    }

    .case-passport {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr);
      gap: clamp(48px, 8vw, 150px);
      padding: clamp(96px, 12vw, 170px) clamp(24px, 6vw, 96px);
      color: #eae8e4;
      background-color: #0c0d0e;
    }

    .case-lead {
      max-width: 860px;
      margin: 0;
      color: #f2eadb;
      font-size: clamp(34px, 4.2vw, 78px);
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: -.045em;
    }

    .case-facts {
      display: grid;
      align-content: start;
      border-top: 1px solid rgba(255,255,255,.22);
    }

    .case-fact {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: 24px;
      padding: 24px 0;
      border-bottom: 1px solid rgba(255,255,255,.16);
      transform-origin: left center;
    }

    .case-fact span {
      font-family: var(--font-mono);
      font-size: 12px;
      color: rgba(255,255,255,.46);
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .case-fact strong {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.3;
    }

    .case-process {
      height: 360vh;
      background-color: #0c0d0e;
    }

    .case-process-sticky {
      position: sticky;
      top: 0;
      height: 100svh;
      overflow: hidden;
    }

    .case-process-track {
      display: flex;
      height: 100%;
      width: max-content;
      transform: translate3d(var(--case-process-x, 0px), 0, 0);
      will-change: transform;
    }

    .case-panel {
      position: relative;
      flex: 0 0 100vw;
      display: grid;
      grid-template-columns: minmax(300px, .62fr) minmax(360px, 1fr);
      gap: clamp(40px, 7vw, 120px);
      align-items: center;
      padding: clamp(28px, 6vw, 96px);
      overflow: hidden;
    }

    .case-panel h2 {
      max-width: 620px;
      margin: 0;
      color: #fff;
      font-size: clamp(42px, 5.8vw, 104px);
      font-weight: 600;
      line-height: .9;
      letter-spacing: -.055em;
    }

    .case-panel p {
      max-width: 520px;
      margin: 22px 0 0;
      color: rgba(255,255,255,.62);
      font-size: 18px;
      line-height: 1.5;
    }

    .case-analytic-card {
      position: relative;
      min-height: min(62vh, 560px);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 22px;
      background:
        linear-gradient(135deg, rgba(8,124,240,.22), transparent 42%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 48px),
        #0d1118;
      box-shadow: 0 40px 120px rgba(0,0,0,.42);
    }

    .case-analytic-card::before,
    .case-analytic-card::after {
      content: "";
      position: absolute;
      inset: 18%;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 50%;
      transform: translate3d(var(--case-layer-x, 0px), var(--case-layer-y, 0px), 0);
      transition: transform .6s var(--ease-aww);
    }

    .case-analytic-card::after {
      inset: 30% 14% 22% 28%;
      border-color: rgba(8,124,240,.48);
      border-radius: 22px;
      transform: translate3d(calc(var(--case-layer-x, 0px) * -1), calc(var(--case-layer-y, 0px) * .7), 0);
    }

    .case-chart {
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 18%;
      height: 38%;
      background:
        linear-gradient(110deg, transparent 0 12%, rgba(8,124,240,.85) 12% 13%, transparent 13% 100%),
        linear-gradient(145deg, transparent 0 28%, rgba(255,199,92,.75) 28% 29%, transparent 29% 100%),
        linear-gradient(165deg, transparent 0 44%, rgba(255,255,255,.78) 44% 45%, transparent 45% 100%);
      clip-path: polygon(0 82%, 16% 64%, 29% 68%, 47% 36%, 66% 48%, 84% 18%, 100% 26%, 100% 100%, 0 100%);
      opacity: .88;
    }

    .case-gallery {
      padding: clamp(90px, 10vw, 150px) 0;
      color: #111215;
      background-color: #fff;
      overflow: hidden;
      transition: background-color .6s ease;
    }

    .case-gallery-head {
      display: grid;
      grid-template-columns: .35fr 1fr;
      gap: clamp(28px, 7vw, 110px);
      padding: 0 clamp(24px, 6vw, 96px) 58px;
    }

    .case-gallery h2 {
      max-width: 760px;
      margin: 0;
      color: #111215;
      font-size: clamp(42px, 5vw, 86px);
      font-weight: 600;
      line-height: .95;
      letter-spacing: -.05em;
    }

    .case-marquee {
      display: flex;
      gap: 22px;
      width: max-content;
      animation: caseMarquee 26s linear infinite;
    }

    .case-shot {
      position: relative;
      width: min(720px, 72vw);
      aspect-ratio: 1.42;
      overflow: hidden;
      border-radius: 20px;
      background: #eef2f8;
      box-shadow: 0 28px 80px rgba(17,24,39,.12);
      transform: perspective(1200px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
      transition: transform .5s var(--ease-aww);
    }

    .case-shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .case-final {
      min-height: 100svh;
      display: grid;
      align-content: center;
      gap: 70px;
      padding: clamp(80px, 10vw, 150px) clamp(24px, 6vw, 96px);
      background:
        radial-gradient(circle at 50% 50%, #0d1b3e 0%, #040814 100%);
      color: #eae8e4;
    }

    .case-result {
      display: grid;
      gap: 20px;
    }

    .case-result strong {
      font-size: clamp(90px, 18vw, 260px);
      font-weight: 700;
      line-height: .8;
      letter-spacing: -.08em;
    }

    .case-result span {
      max-width: 640px;
      color: rgba(255,255,255,.72);
      font-size: clamp(22px, 2.4vw, 42px);
      line-height: 1.08;
      letter-spacing: -.035em;
    }

    .next-case {
      position: relative;
      display: block;
      overflow: hidden;
      padding-top: 42px;
      border-top: 1px solid rgba(255,255,255,.22);
      color: #fff;
      min-height: 32vh;
      padding-bottom: 48px;
    }

    .next-case img {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.08);
      filter: brightness(.4);
      transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
    }

    .next-case:hover img {
      opacity: 1;
      transform: scale(1);
    }

    .next-case strong {
      transition: color .72s var(--ease-aww), transform .72s var(--ease-aww);
    }

    .next-case:hover strong {
      color: #c5a880;
      transform: translate3d(18px, 0, 0);
    }

    .next-case span,
    .next-case strong {
      position: relative;
      z-index: 1;
      display: block;
    }

    .next-case span {
      margin-bottom: 18px;
      font-family: var(--font-mono);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: rgba(255,255,255,.68);
    }

    .next-case strong {
      font-size: clamp(46px, 8vw, 132px);
      line-height: .9;
      letter-spacing: -.06em;
      text-transform: uppercase;
    }

    @keyframes caseHeroZoom {
      to { transform: scale(1.16); }
    }

    @keyframes caseTitleRise {
      from { opacity: 0; transform: translate3d(0, 60px, 0); filter: blur(12px); }
      to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
    }

    @keyframes caseMarquee {
      to { transform: translateX(calc(-50% - 11px)); }
    }

    @media (max-width: 900px) {
      .case-passport,
      .case-panel,
      .case-gallery-head {
        grid-template-columns: 1fr;
      }

      .case-hero {
        min-height: 620px;
      }

      .case-title {
        font-size: clamp(52px, 17vw, 92px);
      }

      .case-process {
        height: auto;
      }

      .case-process-sticky {
        position: relative;
        height: auto;
      }

      .case-process-track {
        display: grid;
        width: 100%;
        transform: none !important;
      }

      .case-panel {
        min-height: 720px;
      }
    }
    body.case-page {
      --case-bg: #ffffff;
      color: #111215;
      background: #fff;
    }

    .case-nav {
      display: none;
    }

    .case-page .site-header {
      color: #111215;
      background: rgba(255,255,255,.78);
      border-bottom: 1px solid rgba(17,18,21,.08);
      backdrop-filter: blur(18px);
    }

    .case-page .main-nav a,
    .case-page .header-actions > a:first-child {
      color: #111215;
    }

    .case-passport,
    .case-gallery {
      color: #111215;
      background: #fff;
    }

    .case-lead,
    .case-panel h2,
    .case-fact strong,
    .case-gallery h2 {
      color: #111215;
    }

    .case-facts {
      border-top-color: rgba(17,18,21,.12);
    }

    .case-fact {
      border-bottom-color: rgba(17,18,21,.1);
    }

    .case-fact span,
    .case-panel p {
      color: rgba(17,18,21,.56);
    }

    .case-process {
      height: auto;
      padding: clamp(90px, 11vw, 180px) clamp(18px, 6vw, 96px);
      color: #eae8e4;
      background: #0c0d0e;
      overflow: hidden;
    }

    .case-process-sticky {
      position: relative;
      height: auto;
      overflow: visible;
    }

    .case-process-track {
      display: grid;
      gap: clamp(42px, 7vw, 96px);
      width: 100%;
      height: auto;
      transform: none !important;
    }

    .case-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(280px, .66fr) minmax(360px, 1fr);
      gap: clamp(30px, 7vw, 110px);
      align-items: center;
      min-height: 68vh;
      padding: 0;
      overflow: visible;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .case-panel h2 {
      color: rgba(255,255,255,.2);
      font-size: clamp(36px, 5.4vw, 98px);
      font-weight: 800;
      transition: color .7s var(--ease-aww), text-shadow .7s var(--ease-aww), transform .7s var(--ease-aww);
    }

    .case-panel p {
      color: rgba(255,255,255,.44);
      transition: color .7s var(--ease-aww), transform .7s var(--ease-aww);
    }

    .case-panel.is-scan-active h2 {
      color: #087cf0;
      text-shadow: 0 0 38px rgba(8,124,240,.34);
      transform: translate3d(14px, 0, 0);
    }

    .case-panel.is-scan-active p {
      color: rgba(255,255,255,.78);
      transform: translate3d(14px, 0, 0);
    }

    .case-analytic-card {
      position: relative;
      min-height: min(56vh, 560px);
      border: 1px solid rgba(8,124,240,.2);
      border-radius: 22px;
      background:
        linear-gradient(rgba(8,124,240,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8,124,240,.11) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(8,124,240,.16), transparent 54%),
        #07090c;
      background-size: 42px 42px, 42px 42px, auto, auto;
      box-shadow: 0 34px 110px rgba(0,0,0,.38), inset 0 0 70px rgba(8,124,240,.06);
      opacity: .42;
      transition: opacity .7s var(--ease-aww), transform .7s var(--ease-aww), border-color .7s var(--ease-aww);
    }

    .case-panel.is-scan-active .case-analytic-card {
      opacity: 1;
      border-color: rgba(8,124,240,.62);
      transform: translate3d(0, -6px, 0);
    }

    .case-analytic-card::before,
    .case-analytic-card::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .case-analytic-card::before {
      left: 8%;
      right: 8%;
      top: var(--scan-y, 18%);
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(8,124,240,.95), transparent);
      box-shadow: 0 0 24px rgba(8,124,240,.8);
      animation: caseScanline 4.8s linear infinite;
    }

    .case-analytic-card::after {
      inset: 14%;
      border: 1px solid rgba(8,124,240,.34);
      border-radius: 18px;
      transform: translate3d(var(--case-layer-x, 0px), var(--case-layer-y, 0px), 0);
    }

    .case-scan-visual {
      position: absolute;
      inset: 13%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(5, 1fr);
      gap: 12px;
      opacity: .72;
      transform: translate3d(calc(var(--case-layer-x, 0px) * -.4), calc(var(--case-layer-y, 0px) * -.4), 0);
      transition: transform .35s var(--ease-aww), opacity .7s var(--ease-aww);
    }

    .case-panel.is-scan-active .case-scan-visual {
      opacity: 1;
    }

    .case-scan-visual span {
      border: 1px solid rgba(8,124,240,.58);
      border-radius: 8px;
      box-shadow: 0 0 18px rgba(8,124,240,.16);
    }

    .case-scan-visual span:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 2; }
    .case-scan-visual span:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 3; }
    .case-scan-visual span:nth-child(3) { grid-column: 1 / 3; grid-row: 3 / 6; }
    .case-scan-visual span:nth-child(4) { grid-column: 3 / 6; grid-row: 3 / 5; }
    .case-scan-visual span:nth-child(5) { grid-column: 6 / 7; grid-row: 4 / 6; }

    @keyframes caseScanline {
      0% { top: 12%; opacity: .2; }
      12% { opacity: 1; }
      88% { opacity: 1; }
      100% { top: 88%; opacity: .2; }
    }

    .case-process {
      min-height: 100svh;
      padding: clamp(96px, 12vw, 180px) clamp(18px, 6vw, 96px);
      background: #0c0d0e;
      color: #f7f4ee;
    }

    .case-process-sticky,
    .case-process-track {
      display: block;
      height: auto;
      width: 100%;
      transform: none !important;
    }

    .case-type-panel {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr);
      gap: clamp(34px, 7vw, 124px);
      align-items: center;
      min-height: calc(100svh - clamp(120px, 14vw, 220px));
      overflow: hidden;
      isolation: isolate;
    }

    .case-process .case-panel {
      display: none !important;
    }

    .case-type-panel::before {
      content: "";
      position: absolute;
      inset: -20%;
      z-index: -1;
      opacity: var(--case-light-opacity, .18);
      pointer-events: none;
      background: radial-gradient(circle at var(--case-mx, 50%) var(--case-my, 50%), rgba(8,124,240,.18), transparent 18%);
      transition: opacity .45s var(--ease-aww);
    }

    .case-type-left {
      min-width: 0;
    }

    .case-type-index {
      display: block;
      margin-bottom: clamp(18px, 2.6vw, 36px);
      color: #087cf0;
      font-family: var(--font-mono);
      font-size: clamp(13px, 1vw, 16px);
      line-height: 1;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-shadow: 0 0 24px rgba(8,124,240,.42);
    }

    .case-type-title {
      display: block;
      margin: 0;
      color: #fff;
      font-size: clamp(48px, 7.4vw, 150px);
      font-weight: 900;
      line-height: .76;
      letter-spacing: -.09em;
      text-transform: uppercase;
      transform: translate3d(var(--title-x, 0px), var(--title-y, 0px), 0);
      transition: transform .55s cubic-bezier(.16, 1, .3, 1), text-shadow .55s var(--ease-aww);
      text-wrap: balance;
    }

    .case-type-panel.is-scan-active .case-type-title {
      text-shadow: 0 0 46px rgba(8,124,240,.20);
    }

    .case-type-copy {
      max-width: 720px;
      margin: 0;
      color: #eae8e4;
      font-size: clamp(26px, 3vw, 54px);
      font-weight: 300;
      line-height: 1.28;
      letter-spacing: -.045em;
    }

    .case-type-copy span {
      color: rgba(234,232,228,.13);
      transition: color .9s var(--ease-aww), text-shadow .9s var(--ease-aww);
      transition-delay: calc(var(--word-index, 0) * 34ms);
    }

    .case-type-panel.is-scan-active .case-type-copy span {
      color: rgba(255,255,255,.92);
      text-shadow: 0 0 22px rgba(8,124,240,.10);
    }

    @media (max-width: 900px) {
      .case-type-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 22px;
      }

      .case-type-title {
        font-size: clamp(38px, 8vw, 64px);
      }

      .case-type-copy {
        font-size: clamp(1rem, 3.2vw, 1.2rem);
        line-height: 1.7;
      }
    }

    .case-final {
      background: radial-gradient(circle at 50% 0%, #163f8d 0%, #071326 48%, #050812 100%);
    }

    .case-result strong {
      color: #c5a880;
      text-shadow: 0 0 46px rgba(197,168,128,.18);
    }

    .case-page .contact {
      margin-top: 0;
    }

    .case-process {
      background: #0c0d0e;
    }

    .case-type-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 40px;
      align-items: center;
    }

    .case-type-title {
      color: #fff;
      max-width: 100%;
      text-shadow: 0 0 34px rgba(8,124,240,.12);
      overflow-wrap: anywhere;
      word-break: normal;
    }

    .case-type-title span {
      display: block;
    }

    .case-type-copy {
      max-width: 760px;
      color: #eae8e4;
      font-size: clamp(1.2rem, 1.55vw, 1.75rem);
      font-weight: 300;
      line-height: 1.9;
      letter-spacing: -.02em;
    }

    .case-type-copy span {
      color: rgba(234,232,228,.2);
    }

    .case-type-panel.is-scan-active .case-type-copy span {
      color: #eae8e4;
      text-shadow: 0 0 18px rgba(8,124,240,.12);
    }

    .case-gallery {
      background: #fff;
      color: #111215;
    }

    .case-marquee {
      animation-duration: 32s;
      will-change: transform;
    }

    .case-shot:hover {
      box-shadow: 0 34px 94px rgba(17,24,39,.16), 0 0 0 1px rgba(8,124,240,.18);
    }

    .case-final {
      min-height: 112svh;
      padding-top: clamp(130px, 14vw, 220px);
      padding-bottom: clamp(130px, 14vw, 220px);
      background: radial-gradient(circle at 50% 16%, #0d1b3e 0%, #071326 46%, #040814 100%);
    }

    .case-result strong {
      color: #f4d49b;
      text-shadow: 0 0 58px rgba(8,124,240,.18), 0 0 42px rgba(197,168,128,.18);
    }

    .case-result span {
      color: rgba(234,232,228,.78);
    }

    .case-quiz {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, .78fr) minmax(340px, .62fr);
      gap: clamp(40px, 8vw, 132px);
      padding: clamp(96px, 12vw, 180px) clamp(24px, 6vw, 96px);
      background: #fff;
      color: #111215;
    }

    .case-quiz h2 {
      max-width: 850px;
      margin: 0;
      font-size: clamp(52px, 8vw, 132px);
      font-weight: 800;
      line-height: .86;
      letter-spacing: -.075em;
      text-transform: uppercase;
    }

    .case-quiz p {
      max-width: 560px;
      margin: clamp(24px, 4vw, 46px) 0 0;
      color: rgba(17,18,21,.56);
      font-size: clamp(18px, 1.35vw, 24px);
      line-height: 1.5;
      letter-spacing: -.025em;
    }

    .case-quiz-form {
      display: grid;
      align-content: center;
      gap: 34px;
    }

    .case-quiz-form label {
      position: relative;
      display: block;
      padding-top: 22px;
    }

    .case-quiz-form input,
    .case-quiz-form textarea {
      width: 100%;
      border: 0;
      border-bottom: 1px solid rgba(0,0,0,.1);
      border-radius: 0;
      padding: 14px 0 16px;
      color: #111215;
      background: transparent;
      outline: 0;
      font-size: 22px;
      letter-spacing: -.03em;
      resize: vertical;
      transition: border-color .42s var(--ease-aww), box-shadow .42s var(--ease-aww);
    }

    .case-quiz-form label span {
      position: absolute;
      left: 0;
      top: 36px;
      color: rgba(17,18,21,.42);
      pointer-events: none;
      font-size: 18px;
      letter-spacing: -.025em;
      transition: transform .42s var(--ease-aww), color .42s var(--ease-aww), font-size .42s var(--ease-aww);
    }

    .case-quiz-form input:focus,
    .case-quiz-form textarea:focus {
      border-bottom-color: #111215;
      box-shadow: 0 16px 34px rgba(8,124,240,.08);
    }

    .case-quiz-form input:focus + span,
    .case-quiz-form input:not(:placeholder-shown) + span,
    .case-quiz-form textarea:focus + span,
    .case-quiz-form textarea:not(:placeholder-shown) + span {
      color: #087cf0;
      font-size: 12px;
      transform: translateY(-34px);
    }

    .case-quiz-form button {
      width: max-content;
      min-height: 58px;
      padding: 0 32px;
      border: 1px solid #111215;
      border-radius: 0;
      color: #fff;
      background: #111215;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: .06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color .42s var(--ease-aww), background .42s var(--ease-aww), border-color .42s var(--ease-aww), transform .42s var(--ease-aww);
    }

    .case-quiz-form button:hover {
      color: #fff;
      border-color: #087cf0;
      background: #087cf0;
      transform: translate3d(8px, 0, 0);
    }

    .case-page .contact {
      background: var(--gradient-hero-reversed);
    }

    .case-page .contact-form input,
    .case-page .contact-form textarea {
      border: 0;
      border-radius: 6px;
      color: #111215;
      background: #fff;
      backdrop-filter: none;
      box-shadow: none;
    }

    .case-page .contact-form input::placeholder,
    .case-page .contact-form textarea::placeholder {
      color: rgba(17,18,21,.46);
    }

    .case-page .contact-form input:focus,
    .case-page .contact-form textarea:focus {
      outline: none;
      box-shadow: 0 0 0 2px rgba(8,124,240,.28);
    }

    @media (max-width: 900px) {
      .case-type-panel {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 22px;
      }

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

    body.case-entering .case-hero img {
      animation-duration: 18s;
      filter: contrast(1.04) saturate(.96) brightness(1);
    }

/* 404 page (scoped under body.not-found-page since this page has its own self-contained look) */
body.not-found-page {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 44%, rgba(0, 102, 255, .06), transparent 38%),
    #ffffff;
  font-family: Manrope, Arial, sans-serif;
  overflow: hidden;
}

body.not-found-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,102,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,102,255,.075) 1px, transparent 1px),
    linear-gradient(rgba(15,16,21,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,16,21,.035) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 112px 112px, 112px 112px;
  pointer-events: none;
}

.not-found {
  position: relative;
  display: grid;
  min-height: 100vh;
  padding: clamp(28px, 5vw, 80px);
  place-items: center;
  text-align: center;
  isolation: isolate;
}

#notFoundCanvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.not-found__content {
  display: grid;
  justify-items: center;
  max-width: 760px;
  margin-top: clamp(350px, 42vw, 520px);
}

.not-found__eyebrow {
  margin: 0 0 18px;
  color: rgba(0,102,255,.72);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.not-found__copy {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(15,16,21,.66);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
}

.not-found__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: clamp(28px, 4vw, 48px);
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(15,16,21,.18);
  border-radius: 6px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 50px rgba(8,38,86,.08);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: color .34s cubic-bezier(.16,1,.3,1), background .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1), border-color .34s ease;
}

.not-found__button::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 7px 7px;
  transition: opacity .34s ease;
}

.not-found__button span {
  position: relative;
  z-index: 1;
}

.not-found__button:hover {
  color: #fff;
  border-color: #0d0d0d;
  background: #0d0d0d;
  transform: translateY(-2px);
}

.not-found__button:hover::before {
  opacity: .16;
}

@media (max-width: 680px) {
  body.not-found-page {
    overflow: auto;
  }

  .not-found {
    min-height: 100svh;
  }

  .not-found__content {
    margin-top: 320px;
  }
}