/* Quart / Editorial Olive: foundations, shared components, page compositions. */
:root {
  --paper: #f2f0e9;
  --ivory: #f5f3ed;
  --ink: #171a17;
  --olive: #66764b;
  --olive-deep: #4e6038;
  --sage: #d5d9c9;
  --muted: #575d52;
  --line: rgb(23 26 23 / 20%);
  --on-dark-muted: #b9bfb0;
  --dark-line: rgb(242 240 233 / 24%);
  --serif: "Cormorant Garamond",Georgia,serif;
  --sans: "Manrope",sans-serif;
  --mono: "IBM Plex Mono",monospace;
  --gutter: clamp(22px,4vw,76px);
  --space-section: clamp(88px,9vw,160px);
  --ease: cubic-bezier(.16,1,.3,1);
  --radius: 2px;
  --z-header: 20;
  --z-texture: 30;
  --z-progress: 40;
  --z-skip: 50
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
  background: var(--paper)
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased
}

img {
  display: block;
  max-width: 100%;
  height: auto
}

a {
  color: inherit;
  text-decoration: none
}

button,input,textarea {
  font: inherit
}

button {
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius)
}

button,input,textarea,summary {
  -webkit-tap-highlight-color: transparent
}

p,h1,h2,h3,figure,dl,dd {
  margin: 0
}

p {
  text-wrap: pretty
}

h1,h2,h3 {
  font-weight: 400
}

h1,h2 {
  font-family: var(--serif);
  letter-spacing: -.055em;
  line-height: .94;
  text-wrap: balance
}

h2 {
  font-size: clamp(64px,7.7vw,122px)
}

h1 em,h2 em {
  color: var(--olive-deep);
  font-style: normal
}

h3 {
  letter-spacing: -.03em
}

em {
  font-style: normal
}

::selection {
  color: var(--paper);
  background: var(--olive-deep)
}

:focus-visible {
  outline: 2px solid var(--olive-deep);
  outline-offset: 6px
}

[hidden] {
  display: none!important
}

.scene,.wrap {
  width: 100%;
  padding-inline: max(var(--gutter),calc((100vw - 1600px)/2))
}

.scene {
  padding-block: var(--space-section)
}

.scene > *, .wrap > * {
  min-width: 0;
}

.section-code {
  font: 500 11px/1.6 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase
}

.section-heading {
  margin-bottom: clamp(44px,5.5vw,84px)
}

.section-heading .section-code {
  margin-bottom: 30px
}

.section-heading>p:last-child:not(.section-code) {
  max-width: 48ch;
  margin-top: 30px;
  color: var(--muted)
}

.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding-block: 8px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: color 180ms
}

.text-link:hover {
  color: var(--olive-deep)
}

.text-link span,.button span,.header-cta span {
  display: inline-block;
  transition: transform 300ms var(--ease)
}

.text-link:hover span,.button:hover span,.header-cta:hover span {
  transform: translate(3px,-3px)
}

.button {
  display: inline-flex;
  min-height: 56px;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  padding: 17px 24px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  transition: background 220ms,color 220ms,transform 220ms
}

.button:hover {
  background: var(--olive-deep);
  border-color: var(--olive-deep)
}

.button:active {
  transform: translateY(2px)
}

.button--light {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper)
}

.button--light:hover {
  background: var(--sage);
  color: var(--ink);
  border-color: var(--sage)
}

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: 12px;
  left: 12px;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%)
}

.skip-link:focus {
  transform: translateY(0)
}

.scroll-progress {
  position: fixed;
  z-index: var(--z-progress);
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left
}

.paper-noise {
  position: fixed;
  z-index: var(--z-texture);
  inset: 0;
  pointer-events: none;
  opacity: .075;
  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='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")
}

.reveal {
  opacity: 1
}

.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease)
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none
}

/* Original raster sign, optically cropped with CSS. Geometry is never redrawn. */
.logo-crop {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 48px;
  overflow: hidden;
  flex: 0 0 auto;
  mix-blend-mode: multiply
}

.logo-crop img {
  position: absolute;
  width: 80px;
  height: 80px;
  max-width: none;
  left: -20px;
  top: -14px;
  filter: invert(1)
}

.site-header {
  background: var(--paper);
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 100px;
  border-bottom: 1px solid var(--line)
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto
}

.brand>span:last-child {
  font: 500 40px/1 var(--serif);
  letter-spacing: -.06em
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(24px,3vw,46px);
  font-size: 12px;
  font-weight: 600
}

.site-nav a {
  padding-block: 12px;
  transition: color 200ms
}

.site-nav a:hover,.site-nav a[aria-current],.site-nav .nav-sellers {
  color: var(--olive-deep)
}

.nav-sellers span {
  margin-left: 6px
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 44px;
  border-bottom: 1px solid var(--ink);
  margin-left: 30px;
  font-size: 12px;
  font-weight: 600
}

.menu-toggle {
  display: none
}

/* Evolution of the original editorial hero and interactive engine. */
.hero {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  gap: clamp(48px,5vw,100px);
  padding-top: clamp(72px,7vw,110px);
  padding-bottom: clamp(72px,7vw,116px);
  min-height: min(820px,calc(100svh - 100px))
}

.hero__content {
  min-width: 0
}

.hero__content>.section-code {
  margin-bottom: 32px
}

.hero__title {
  margin-left: -5px;
  font-size: clamp(100px,10.8vw,172px);
  line-height: .88;
  letter-spacing: -.065em
}

.hero__title em {
  white-space: nowrap
}

.hero__brief {
  max-width: 38ch;
  margin-top: 40px
}

.hero__brief p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted)
}

.hero__brief .button {
  margin-top: 28px
}

.quart-engine {
  width: 100%;
  max-width: 480px;
  justify-self: end;
  min-width: 0;
  align-self: center
}

.quart-engine__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  font: 10px/1.4 var(--mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em
}

.quart-engine__viewport {
  position: relative;
  aspect-ratio: 1 / 1.06;
  overflow: hidden;
  background: var(--sage);
  border-radius: var(--radius)
}

.engine-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms,visibility 400ms
}

.quart-engine[data-mode="structure"] .engine-scene--structure,.quart-engine[data-mode="logic"] .engine-scene--logic {
  opacity: 1;
  visibility: visible
}

.engine-scene--structure {
  background-color: var(--sage);
  background-image: linear-gradient(rgb(23 26 23 / 8%) 1px,transparent 1px),linear-gradient(90deg,rgb(23 26 23 / 8%) 1px,transparent 1px);
  background-size: 48px 48px
}

.selection-frame {
  position: absolute;
  inset: 11% 22% 25%;
  border: 1px solid rgb(23 26 23 / 35%);
  display: grid;
  place-items: center;
  transition: transform 700ms var(--ease)
}

.quart-engine:hover .selection-frame {
  transform: translateY(-5px)
}

.selection-frame>i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--paper);
  border: 1px solid var(--olive-deep)
}

.selection-frame>i:nth-child(1) {
  left: -4px;
  top: -4px
}

.selection-frame>i:nth-child(2) {
  right: -4px;
  top: -4px
}

.selection-frame>i:nth-child(3) {
  right: -4px;
  bottom: -4px
}

.selection-frame>i:nth-child(4) {
  left: -4px;
  bottom: -4px
}

.logo-crop--hero {
  width: 100%;
  height: 100%
}

.logo-crop--hero img {
  width: 190%;
  height: auto;
  left: -45%;
  top: -25%
}

.engine-scene__caption {
  position: absolute;
  bottom: 7%;
  left: 7%;
  font-family: var(--serif);
  font-size: clamp(25px,3vw,45px);
  line-height: .95;
  letter-spacing: -.035em
}

.engine-scene--logic {
  background: var(--ink);
  color: var(--paper);
  padding: 8%
}

.engine-kicker {
  font: 10px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--on-dark-muted)
}

.engine-scene--logic>strong {
  display: block;
  font: 400 clamp(40px,4vw,64px)/1.1 var(--serif);
  margin-top: 14px;
  letter-spacing: -.04em
}

.engine-flow {
  display: grid;
  justify-items: start;
  gap: 5px;
  margin-top: 28px;
  font: 12px/1.5 var(--mono)
}

.engine-flow span {
  border: 1px solid var(--dark-line);
  padding: 7px 16px;
  min-width: 75%
}

.engine-flow span:last-child {
  background: var(--sage);
  color: var(--ink)
}

.engine-flow b {
  margin-left: 16px;
  font-weight: 400;
  color: var(--on-dark-muted)
}

.engine-scene--logic .engine-scene__caption {
  font: 11px/1.6 var(--mono);
  color: var(--on-dark-muted)
}

.quart-engine__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line)
}

.quart-engine__controls button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  min-height: 54px;
  padding: 12px 15px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 11px/1.5 var(--mono);
  transition: background 200ms,color 200ms
}

.quart-engine__controls button.is-active {
  background: var(--ink);
  color: var(--paper)
}

.quart-engine__controls button:hover:not(.is-active) {
  background: var(--sage);
  color: var(--ink)
}

/* Portfolio: real screenshots and explicitly labelled concepts. */
.selected-work {
  border-top: 1px solid var(--line)
}

.selected-work .section-heading h2 {
  max-width: 18ch
}

.project-cover {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--sage)
}

.project-cover>img {
  width: 100%;
  aspect-ratio: 1.65;
  object-fit: cover;
  object-position: top;
  transition: transform 900ms var(--ease)
}

.project-cover:hover>img {
  transform: scale(1.025)
}

.project-cover__action {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: grid;
  align-items: center;
  min-height: 48px;
  padding: 14px 22px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px
}

.project-caption {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: start;
  gap: 36px;
  padding: 30px 0 36px
}

.project-caption h3 {
  margin-top: 9px;
  font: 400 clamp(38px,4vw,62px)/1 var(--serif);
  letter-spacing: -.04em
}

.project-caption h3 span {
  display: inline-block;
  margin-left: 15px;
  font: 400 28px/1 var(--sans)
}

.project-caption>p {
  max-width: 40ch;
  padding-top: 4px;
  font-size: 13px;
  color: var(--muted)
}

.project-stack {
  font: 10px/1.7 var(--mono);
  color: var(--muted);
  padding-top: 6px
}

summary {
  cursor: pointer;
  list-style: none
}

summary: :-webkit-details-marker {
  display: none
}

.concept-archive {
  border-top: 1px solid var(--line)
}

.concept-archive>summary {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px
}

.concept-archive>summary>span:first-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px
}

.concept-archive>summary>span:last-child {
  font-size: 24px
}

.concept-archive__body {
  max-width: 850px;
  padding-bottom: 20px
}

.concept-archive__body>p {
  max-width: 60ch;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 30px
}

.concept {
  border-top: 1px solid var(--line)
}

.concept summary {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px
}

.concept summary>span:first-child {
  font: 400 27px/1 var(--serif)
}

.concept-label {
  margin-left: auto;
  color: var(--muted);
  font: 10px/1.5 var(--mono)
}

.concept>p {
  max-width: 55ch;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 13px
}

/* A full olive commerce spread. */
.seller-feature {
  color: #fff;
  background: var(--olive)
}

.seller-feature :focus-visible,.contact :focus-visible,.site-footer :focus-visible,.solutions :focus-visible,.integrations :focus-visible,.case-integration :focus-visible {
  outline-color: var(--sage)
}

.seller-feature__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: 8%;
  margin-top: 46px
}

.seller-feature h2 {
  font-size: clamp(64px,6.5vw,108px);
  line-height: .95;
  letter-spacing: -.05em
}

.seller-feature h2 em {
  color: var(--paper)
}

.seller-feature__copy>p {
  margin-top: 36px;
  max-width: 42ch;
  font-size: 14px
}

.seller-feature .button {
  margin-top: 36px;
  gap: 20px
}

.commerce-visual {
  position: relative;
  min-height: 520px;
  background: var(--sage);
  color: var(--ink);
  overflow: hidden
}

.commerce-visual__type {
  position: absolute;
  z-index: 1;
  top: 9%;
  left: 8%;
  font: 400 clamp(58px,6.4vw,106px)/.82 var(--serif);
  letter-spacing: -.06em
}

.commerce-visual img {
  position: absolute;
  bottom: -40px;
  right: 8%;
  width: 47%;
  transform: rotate(7deg);
  border: 5px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 15px 25px rgb(23 26 23 / 20%)
}

.commerce-visual figcaption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font: 9px/1.4 var(--mono);
  letter-spacing: .03em;
  color: var(--ink)
}

.seller-benefits {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr 1fr;
  gap: 20px;
  border-top: 1px solid rgb(242 240 233 / 40%);
  padding-top: 28px;
  margin-top: 72px;
  font-size: 12px
}

/* The engineering story is now readable without several screens of empty scrolling. */
.solutions {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 8%;
  background: var(--ink);
  color: var(--paper)
}

.solutions__intro .section-code {
  color: var(--on-dark-muted);
  margin-bottom: 36px
}

.solutions h2 {
  font-size: clamp(58px,6.4vw,104px)
}

.solutions h2 em {
  color: var(--sage)
}

.solutions__intro>p:last-child {
  max-width: 38ch;
  margin-top: 36px;
  color: var(--on-dark-muted);
  font-size: 14px
}

.solution-layer {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--dark-line)
}

.solution-layer:first-child {
  padding-top: 20px
}

.solution-layer__index {
  font: 11px/1.5 var(--mono);
  color: var(--sage);
  padding-top: 8px
}

.solution-layer h3 {
  font: 400 clamp(28px,2.6vw,42px)/1.1 var(--serif)
}

.solution-layer p {
  max-width: 42ch;
  font-size: 13px;
  color: var(--on-dark-muted);
  margin-top: 14px
}

.solution-layer__meta {
  display: block;
  margin-top: 20px;
  font: 9px/1.5 var(--mono);
  color: var(--sage);
  letter-spacing: .05em
}

.solutions__code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-line);
  font: 10px/1.5 var(--mono);
  color: var(--on-dark-muted)
}

.solutions__code b {
  font-weight: 400
}

.approach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%
}

.approach__intro .section-code,.proof__statement .section-code {
  margin-bottom: 34px
}

.approach__intro>p:last-child {
  max-width: 34ch;
  margin-top: 34px;
  color: var(--muted);
  font-size: 14px
}

.approach__route article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 30px;
  border-top: 1px solid var(--line);
  padding: 30px 0 34px
}

.approach__route article>span {
  font: 11px/1.5 var(--mono);
  color: var(--olive-deep);
  padding-top: 9px
}

.approach__route h3 {
  font: 400 clamp(30px,3vw,46px)/1.1 var(--serif)
}

.approach__route p {
  max-width: 42ch;
  margin: 14px 0 22px;
  color: var(--muted);
  font-size: 13px
}

.approach__route small {
  font: 9px/1.5 var(--mono);
  color: var(--olive-deep)
}

.proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  background: var(--sage)
}

.proof__statement .text-link {
  margin-top: 32px
}

.proof__rail article {
  padding: 30px 0;
  border-top: 1px solid var(--line)
}

.proof__rail article:first-child {
  padding-top: 8px
}

.proof-number {
  display: block;
  font: 400 clamp(70px,8vw,122px)/1.15 var(--serif);
  letter-spacing: -.05em;
  margin-bottom: 12px
}

.proof__rail h3 {
  font-size: 18px;
  font-weight: 500
}

.proof__rail p {
  margin-top: 14px;
  max-width: 43ch;
  font-size: 13px
}

.proof__rail .text-link {
  margin-top: 14px
}

.evidence-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7
}

/* The form prepares a message, never pretends to submit it to a server. */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%;
  background: var(--ink);
  color: var(--paper)
}

.contact__intro .section-code {
  color: var(--on-dark-muted);
  margin-bottom: 34px
}

.contact h2 {
  font-size: clamp(64px,6.7vw,108px)
}

.contact h2 em {
  color: var(--sage)
}

.contact__intro>p:last-of-type {
  max-width: 36ch;
  margin-top: 36px;
  color: var(--on-dark-muted);
  font-size: 13px
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  min-height: 44px;
  margin-top: 30px;
  font-size: clamp(17px,2vw,27px);
  letter-spacing: -.04em;
  border-bottom: 1px solid var(--dark-line)
}

.contact-form {
  padding-top: 6px
}

.form-row {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 28px
}

.field {
  margin-bottom: 28px;
  min-width: 0
}

.field label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px
}

.field label>span:first-child:not(.optional) {
  color: var(--sage)
}

.field .optional {
  margin-left: 8px;
  font-size: 10px;
  color: var(--on-dark-muted)
}

.field input,.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--dark-line);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font-size: 13px;
  line-height: 1.6;
  transition: border-color 200ms
}

.field input::placeholder,.field textarea::placeholder {
  color: #a8aea0;
  opacity: 1
}

.field input:focus,.field textarea:focus {
  border-color: var(--sage);
  outline-color: var(--sage)
}

.field input:user-invalid,.field textarea:user-invalid {
  border-bottom-width: 2px
}

.field textarea {
  resize: vertical;
  min-height: 96px;
  max-height: 360px
}

.field small {
  display: block;
  margin-top: 8px;
  color: var(--on-dark-muted);
  font-size: 10px
}

.form-bottom {
  display: flex;
  align-items: start;
  gap: 24px
}

.form-bottom .button {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  gap: 20px
}

.form-note {
  max-width: 25ch;
  font-size: 10px;
  color: var(--on-dark-muted);
  padding-top: 3px
}

.form-handoff {
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--dark-line)
}

.form-handoff>p:first-child {
  font-size: 13px;
  margin-bottom: 14px
}

.form-handoff .text-link {
  margin-right: 20px;
  color: var(--paper);
  font-size: 11px
}

.form-handoff pre {
  padding: 18px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 11px/1.7 var(--mono);
  max-height: 240px;
  overflow: auto;
  color: var(--on-dark-muted)
}

.copy-status {
  color: var(--sage);
  font-size: 11px
}

.site-footer {
  padding-top: 0;
  padding-bottom: 28px;
  background: var(--ink);
  color: var(--paper)
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 30px;
  padding-top: 40px;
  padding-bottom: 48px;
  border-top: 1px solid var(--dark-line)
}

.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  font: 400 clamp(82px,11vw,176px)/.75 var(--serif);
  letter-spacing: -.08em
}

.footer-wordmark > .footer-arrow {
  display: inline-block;
  margin-left: 12px;
  font: 400 .25em/1 var(--sans);
  vertical-align: top
}

.footer-wordmark > .footer-logo {
  width: 50px;
  height: 66px;
  mix-blend-mode: screen;
}

.footer-logo img {
  width: 112px;
  height: 112px;
  left: -28px;
  top: -20px;
  filter: none;
}

.footer-top p {
  font-size: 12px;
  color: var(--on-dark-muted)
}

.back-top {
  min-height: 44px;
  display: inline-flex;
  align-items: end;
  gap: 28px;
  font-size: 12px
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 30px;
  border-top: 1px solid var(--dark-line);
  padding-top: 24px;
  color: var(--on-dark-muted);
  font-size: 10px
}

/* Ozon landing page. */
.breadcrumb {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 11px
}

.seller-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 7%;
  padding-top: 36px;
  padding-bottom: var(--space-section)
}

.seller-hero .section-code {
  margin: 26px 0;
  max-width: 32ch;
  color: var(--olive-deep)
}

.seller-hero h1 {
  font-size: clamp(72px,7.7vw,126px);
  line-height: .93
}

.seller-hero .lead {
  max-width: 39ch;
  margin-top: 32px;
  color: var(--muted);
  font-size: 14px
}

.seller-hero .button {
  margin-top: 28px
}

.seller-hero__visual {
  position: relative;
  margin-top: 70px;
  padding: 28px;
  background: var(--sage)
}

.seller-hero__label {
  display: block;
  font: 11px/1.5 var(--mono);
  margin-bottom: 38px
}

.seller-hero__visual>img {
  width: 100%;
  box-shadow: 0 15px 25px rgb(23 26 23 / 15%)
}

.integration-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
  font: 10px/1.5 var(--mono)
}

.seller-hero__visual>.text-link {
  margin-top: 18px;
  font-size: 12px
}

.ownership {
  border-top: 1px solid var(--line)
}

.ownership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr
}

.ownership-grid article {
  padding: 34px 0 46px;
  border-top: 1px solid var(--line)
}

.ownership-grid article:nth-child(odd) {
  padding-right: 18%
}

.ownership-grid article:nth-child(even) {
  border-left: 1px solid var(--line);
  padding-left: 14%
}

.ownership-grid article>span {
  font: 10px/1.5 var(--mono);
  color: var(--olive-deep)
}

.ownership-grid h3 {
  font: 400 clamp(30px,3vw,46px)/1.1 var(--serif);
  margin-top: 22px
}

.ownership-grid p {
  max-width: 40ch;
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px
}

.integrations {
  background: var(--ink);
  color: var(--paper)
}

.integrations h2 em {
  color: var(--sage)
}

.integration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%
}

.integration-grid article {
  border-top: 1px solid var(--dark-line);
  padding-top: 24px
}

.integration-index {
  font: 10px/1.5 var(--mono);
  color: var(--on-dark-muted)
}

.integration-grid h3 {
  font: 400 clamp(48px,5vw,80px)/1.1 var(--serif);
  margin-top: 22px
}

.integration-grid p {
  max-width: 43ch;
  margin-top: 20px;
  color: var(--on-dark-muted);
  font-size: 14px
}

.integration-grid .text-link {
  margin-top: 24px;
  font-size: 12px
}

.integrations .text-link:hover {
  color: var(--sage)
}

.integration-disclaimer {
  max-width: 90ch;
  margin-top: 60px;
  font-size: 11px;
  color: var(--on-dark-muted)
}

.project-footnote {
  max-width: 85ch;
  color: var(--muted);
  font-size: 12px
}

.custom-build {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%;
  background: var(--sage)
}

.custom-build__title .section-code {
  margin-bottom: 30px
}

.large-copy {
  font: 400 clamp(26px,2.4vw,38px)/1.3 var(--serif);
  letter-spacing: -.025em
}

.deliverables {
  margin-top: 36px
}

.deliverables p {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-block: 20px;
  font-size: 12px
}

.deliverables span {
  font-weight: 600
}

.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 34px
}

.timeline-list li {
  border-top: 1px solid var(--line);
  padding-top: 24px
}

.timeline-list li>span {
  font: 11px/1.5 var(--mono);
  color: var(--olive-deep)
}

.timeline-list h3 {
  font: 400 35px/1.2 var(--serif);
  margin-top: 36px
}

.timeline-list p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 16px
}

.faq {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 8%;
  border-top: 1px solid var(--line)
}

.faq__intro .section-code {
  margin-bottom: 28px
}

.faq-list details {
  border-top: 1px solid var(--line)
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  min-height: 82px;
  font-size: 14px;
  font-weight: 500;
  padding-block: 20px
}

.faq-list summary>span {
  font-size: 24px;
  font-weight: 400;
  transition: transform 250ms
}

.faq-list details[open] summary>span {
  transform: rotate(45deg)
}

.faq-list details>p {
  padding-bottom: 28px;
  max-width: 65ch;
  font-size: 13px;
  color: var(--muted)
}

/* Real project case study. */
.case-hero {
  padding-top: 36px;
  padding-bottom: 60px
}

.case-hero__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 36px
}

.case-hero h1 {
  font-size: clamp(92px,15vw,230px);
  line-height: 1;
  margin-left: -6px
}

.case-hero h1>span {
  color: var(--olive)
}

.case-hero__heading .text-link {
  margin-bottom: 20px;
  flex-shrink: 0
}

.case-hero__intro {
  margin-top: 26px;
  margin-bottom: 56px;
  font-size: clamp(18px,2.1vw,30px);
  letter-spacing: -.03em
}

.case-cover img {
  width: 100%
}

figcaption {
  font: 10px/1.6 var(--mono);
  color: var(--muted)
}

.case-cover figcaption {
  margin-top: 16px
}

.case-facts {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
  margin-top: 54px;
  border-top: 1px solid var(--line);
  padding-top: 24px
}

.case-facts dt {
  font: 10px/1.5 var(--mono);
  color: var(--muted);
  margin-bottom: 12px
}

.case-facts dd {
  font-size: 12px
}

.case-story {
  border-top: 1px solid var(--line)
}

.case-story>.section-code {
  margin-bottom: 40px
}

.case-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9%
}

.case-story h2 {
  font-size: clamp(60px,6.6vw,108px)
}

.case-story__copy>p:not(.large-copy) {
  margin-top: 26px;
  font-size: 14px;
  color: var(--muted);
  max-width: 50ch
}

.case-gallery {
  background: var(--sage)
}

.case-gallery__grid {
  display: grid;
  grid-template-columns: 1fr .33fr;
  align-items: center;
  gap: 6%
}

.case-gallery__grid img {
  width: 100%
}

.case-gallery__grid figcaption {
  margin-top: 18px
}

.case-gallery__mobile {
  padding-top: 80px
}

.case-integration {
  background: var(--ink);
  color: var(--paper)
}

.case-integration h2 em {
  color: var(--sage)
}

.order-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 40px
}

.order-path div {
  padding-top: 24px;
  border-top: 1px solid var(--dark-line)
}

.order-path div>span {
  color: var(--on-dark-muted);
  font: 11px/1.5 var(--mono)
}

.order-path h3 {
  font: 400 46px/1.2 var(--serif);
  margin-top: 24px
}

.order-path p {
  color: var(--on-dark-muted);
  font-size: 13px;
  margin-top: 16px
}

.order-path>b {
  font-size: 28px;
  font-weight: 400;
  color: var(--sage)
}

.case-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%
}

.case-result .section-code {
  margin-bottom: 34px
}

.case-result__facts>div {
  padding-block: 28px;
  border-top: 1px solid var(--line)
}

.case-result__facts strong {
  font: 400 clamp(64px,7vw,108px)/1.1 var(--serif);
  letter-spacing: -.045em
}

.case-result__facts strong small {
  font-size: .5em
}

.case-result__facts div>p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 12px
}

.case-next {
  background: var(--sage);
  padding-block: 50px
}

.case-next>p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px
}

.case-next a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font: 400 clamp(30px,4.5vw,70px)/1.1 var(--serif);
  letter-spacing: -.04em
}

.not-found {
  min-height: 70svh;
  padding-top: 90px
}

.not-found h1 {
  font-size: clamp(80px,11vw,160px);
  margin-block: 30px
}

.not-found>p:not(.section-code) {
  max-width: 46ch;
  color: var(--muted)
}

.not-found>div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin-top: 36px
}

@media (min-width: 901px) and (max-height: 850px) {
  .hero {
    min-height: calc(100svh - 100px);
    padding-block: 48px;
  }
  .quart-engine {
    max-width: 390px;
  }
  .hero__title {
    font-size: clamp(96px, 9.4vw, 144px);
  }
  .hero__content > .section-code {
    margin-bottom: 26px;
  }
  .hero__brief {
    margin-top: 28px;
  }
  .hero__brief p {
    font-size: 14px;
  }
  .hero__brief .button {
    margin-top: 24px;
  }
}

@media(min-width:1800px) {
  .hero {
    min-height: 850px
  }
}

@media(max-width:1199px) {
  .site-header {
    gap: 24px
  }
  .site-nav {
    gap: 24px
  }
  .header-cta {
    margin-left: 0
  }
  .hero {
    gap: 40px
  }
  .hero__title {
    font-size: 11vw
  }
  .hero__brief {
    margin-top: 32px
  }
  .seller-feature__grid {
    gap: 6%
  }
  .commerce-visual {
    min-height: 450px
  }
  .project-caption {
    grid-template-columns: 1fr 1fr
  }
  .project-stack {
    grid-column: 2;
    padding-top: 0;
    margin-top: -14px
  }
  .contact {
    gap: 6%
  }
  .form-row {
    gap: 20px
  }
  .form-bottom {
    flex-direction: column;
    gap: 16px
  }
  .form-note {
    max-width: 42ch
  }
  .seller-hero {
    gap: 5%
  }
  .seller-hero__visual {
    padding: 22px
  }
  .order-path {
    gap: 24px
  }
}

@media(max-width:900px) {
  h2 {
    font-size: clamp(56px,8.5vw,82px)
  }
  .site-header {
    flex-wrap: wrap;
    min-height: 88px;
    padding-block: 16px;
    gap: 16px 24px
  }
  .brand>span:last-child {
    font-size: 34px
  }
  .brand .logo-crop {
    width: 30px;
    height: 40px
  }
  .brand .logo-crop img {
    width: 66px;
    height: 66px;
    left: -16px;
    top: -12px
  }
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 10px
  }
  .js .menu-toggle {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 0;
    border: 0;
    background: transparent;
    font-size: 12px
  }
  .js .menu-toggle>span {
    font-size: 20px;
    line-height: 1;
    transition: transform 200ms
  }
  .js .menu-toggle[aria-expanded="true"]>span {
    transform: rotate(45deg)
  }
  .js .site-nav {
    display: none
  }
  .js .site-nav.is-open {
    display: flex
  }
  .header-cta {
    margin-left: 12px;
    min-height: 40px;
    font-size: 11px;
    gap: 14px
  }
  .hero {
    min-height: auto;
    grid-template-columns: 1fr 1fr;
    padding-block: 70px;
    gap: 30px
  }
  .hero__title {
    font-size: 11.5vw
  }
  .hero__content>.section-code {
    font-size: 9px
  }
  .hero__brief p {
    font-size: 12px
  }
  .hero__brief .button {
    font-size: 11px;
    padding-inline: 18px;
    gap: 20px
  }
  .quart-engine__bar {
    font-size: 8px
  }
  .quart-engine__controls button {
    font-size: 9px
  }
  .engine-flow {
    margin-top: 15px;
    gap: 2px;
    font-size: 9px
  }
  .engine-flow span {
    padding: 4px 10px
  }
  .engine-scene--logic>strong {
    font-size: 34px
  }
  .engine-scene--logic .engine-scene__caption {
    font-size: 8px
  }
  .seller-feature__grid {
    grid-template-columns: 1fr;
    gap: 50px
  }
  .seller-feature h2 {
    font-size: clamp(66px,10vw,96px)
  }
  .seller-feature__copy>p {
    max-width: 50ch
  }
  .commerce-visual {
    min-height: 420px;
    max-width: 650px
  }
  .commerce-visual__type {
    font-size: 112px
  }
  .commerce-visual img {
    width: 34%;
    right: 12%
  }
  .seller-benefits {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 46px
  }
  .solutions {
    grid-template-columns: 1fr;
    gap: 50px
  }
  .solutions h2 {
    font-size: 11vw
  }
  .solutions__intro>p:last-child {
    max-width: 48ch
  }
  .solution-layer {
    grid-template-columns: 40px 1fr
  }
  .solution-layer h3 {
    font-size: 40px
  }
  .solution-layer p {
    max-width: 55ch
  }
  .approach {
    gap: 6%
  }
  .approach__route article {
    gap: 14px
  }
  .approach__route h3 {
    font-size: 31px
  }
  .proof {
    gap: 6%
  }
  .proof-number {
    font-size: 84px
  }
  .contact {
    grid-template-columns: 1fr;
    gap: 60px
  }
  .contact h2 {
    font-size: clamp(68px,11vw,105px)
  }
  .contact__intro>p:last-of-type {
    max-width: 48ch
  }
  .form-bottom {
    flex-direction: row
  }
  .form-note {
    max-width: 32ch
  }
  .seller-hero {
    grid-template-columns: 1fr;
    padding-top: 24px;
    gap: 50px
  }
  .seller-hero h1 {
    font-size: clamp(76px,12vw,118px)
  }
  .seller-hero .lead {
    max-width: 50ch
  }
  .seller-hero__visual {
    margin-top: 0;
    max-width: 700px
  }
  .seller-hero__visual>img {
    aspect-ratio: 1.6;
    object-fit: cover;
    object-position: top
  }
  .custom-build {
    gap: 6%
  }
  .deliverables p {
    grid-template-columns: 1fr;
    gap: 6px
  }
  .timeline-list {
    grid-template-columns: 1fr 1fr;
    gap: 40px
  }
  .timeline-list h3 {
    margin-top: 20px
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 50px
  }
  .faq__intro h2 {
    font-size: 96px
  }
  .case-story__grid {
    gap: 6%
  }
  .case-result {
    grid-template-columns: 1fr;
    gap: 50px
  }
  .case-result__facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px
  }
  .case-result__facts .evidence-note {
    grid-column: 1 / -1
  }
  .order-path {
    gap: 18px
  }
  .order-path h3 {
    font-size: 34px
  }
}

@media(max-width:600px) {
  :root {
    --gutter: 22px;
    --space-section: 80px
  }
  body {
    font-size: 14px
  }
  h2 {
    font-size: clamp(53px,13.4vw,76px);
    line-height: .98;
    letter-spacing: -.05em
  }
  .section-code {
    font-size: 9px
  }
  .section-heading .section-code {
    margin-bottom: 26px
  }
  .section-heading>p:last-child:not(.section-code) {
    margin-top: 24px;
    font-size: 13px
  }
  .site-header {
    min-height: 82px;
    gap: 12px
  }
  .brand {
    gap: 7px
  }
  .brand>span:last-child {
    font-size: 32px
  }
  .header-cta {
    display: none
  }
  .site-nav {
    flex-direction: column;
    align-items: start;
    gap: 4px;
    padding-top: 14px
  }
  .site-nav a {
    width: 100%;
    min-height: 44px;
    font-size: 13px
  }
  .menu-toggle {
    margin-left: auto
  }
  .button {
    min-height: 54px;
    padding: 16px 20px;
    font-size: 12px;
    gap: 24px
  }
  .text-link {
    font-size: 12px
  }
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 52px;
    padding-top: 44px;
    padding-bottom: 66px
  }
  .hero__content>.section-code {
    margin-bottom: 28px;
    font-size: 9px
  }
  .hero__title {
    font-size: clamp(56px,18.4vw,108px);
    letter-spacing: -.06em;
    line-height: .91;
    margin-left: -3px
  }
  .hero__brief {
    margin-top: 30px;
    max-width: 35ch
  }
  .hero__brief p {
    font-size: 13px;
    line-height: 1.75
  }
  .hero__brief .button {
    margin-top: 24px;
    font-size: 12px;
    min-width: 245px
  }
  .quart-engine {
    width: 100%;
    max-width: 480px
  }
  .quart-engine__bar {
    font-size: 9px
  }
  .quart-engine__viewport {
    aspect-ratio: 1.05
  }
  .quart-engine__controls button {
    min-height: 52px;
    font-size: 10px
  }
  .selection-frame {
    inset: 9% 25% 27%
  }
  .logo-crop--hero img {
    top: -25%
  }
  .engine-scene__caption {
    font-size: 32px
  }
  .engine-flow {
    gap: 3px;
    font-size: 10px;
    margin-top: 22px
  }
  .engine-flow span {
    padding: 5px 12px
  }
  .engine-scene--logic>strong {
    font-size: 42px
  }
  .engine-scene--logic .engine-scene__caption {
    font-size: 9px
  }
  .selected-work .section-heading {
    margin-bottom: 36px
  }
  .selected-work .section-heading h2 {
    font-size: 13.4vw
  }
  .project-cover>img {
    aspect-ratio: 1.12;
    object-position: 42% top
  }
  .project-cover__action {
    right: 14px;
    bottom: 14px;
    min-height: 42px;
    padding: 10px 15px;
    font-size: 11px
  }
  .project-caption {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 0 32px
  }
  .project-caption h3 {
    font-size: 44px
  }
  .project-caption>p {
    font-size: 12px
  }
  .project-stack {
    grid-column: auto;
    margin-top: 0;
    font-size: 9px
  }
  .concept-archive>summary {
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-block: 18px;
    font-size: 12px;
    position: relative;
    padding-right: 22px
  }
  .concept-archive>summary>span:first-child {
    margin-left: 0;
    width: 100%;
    font-size: 10px
  }
  .concept-archive>summary>span:last-child {
    position: absolute;
    right: 0;
    top: 24px
  }
  .concept summary {
    gap: 10px;
    flex-wrap: wrap;
    padding-block: 14px
  }
  .concept summary>span:first-child {
    font-size: 24px
  }
  .concept-label {
    font-size: 8px
  }
  .concept-archive__body>p {
    font-size: 12px
  }
  .seller-feature__grid {
    gap: 42px;
    margin-top: 30px
  }
  .seller-feature h2 {
    font-size: 13.4vw;
    line-height: 1
  }
  .seller-feature__copy>p {
    font-size: 13px;
    margin-top: 28px
  }
  .seller-feature .button {
    width: 100%;
    font-size: 10px;
    gap: 12px;
    padding-inline: 16px;
    margin-top: 28px
  }
  .commerce-visual {
    min-height: 390px
  }
  .commerce-visual__type {
    font-size: 88px
  }
  .commerce-visual img {
    width: 49%;
    right: 7%;
    bottom: -15%
  }
  .commerce-visual figcaption {
    font-size: 8px;
    left: 18px;
    bottom: 18px
  }
  .seller-benefits {
    font-size: 11px;
    gap: 22px 18px;
    margin-top: 38px
  }
  .solutions {
    gap: 42px
  }
  .solutions h2 {
    font-size: 13.3vw
  }
  .solutions__intro .section-code {
    margin-bottom: 26px
  }
  .solutions__intro>p:last-child {
    margin-top: 28px;
    font-size: 13px
  }
  .solution-layer {
    gap: 16px;
    grid-template-columns: 22px 1fr;
    padding-block: 25px
  }
  .solution-layer h3 {
    font-size: 31px
  }
  .solution-layer p {
    font-size: 12px
  }
  .solution-layer__meta {
    font-size: 8px
  }
  .solutions__code {
    font-size: 9px;
    gap: 9px
  }
  .approach {
    grid-template-columns: 1fr;
    gap: 46px
  }
  .approach__intro>p:last-child {
    margin-top: 26px;
    font-size: 13px;
    max-width: 38ch
  }
  .approach__route article {
    padding-block: 25px;
    grid-template-columns: 25px 1fr;
    gap: 18px
  }
  .approach__route h3 {
    font-size: 35px
  }
  .approach__route p {
    font-size: 12px
  }
  .approach__route small {
    font-size: 8px
  }
  .proof {
    grid-template-columns: 1fr;
    gap: 42px
  }
  .proof__statement .text-link {
    margin-top: 24px
  }
  .proof-number {
    font-size: 88px
  }
  .proof__rail h3 {
    font-size: 16px
  }
  .proof__rail p {
    font-size: 12px
  }
  .proof__rail .evidence-note {
    font-size: 10px
  }
  .contact {
    gap: 42px
  }
  .contact h2 {
    font-size: 14.3vw;
    line-height: 1
  }
  .contact__intro .section-code {
    margin-bottom: 26px
  }
  .contact__intro>p:last-of-type {
    font-size: 12px;
    margin-top: 26px
  }
  .contact__email {
    font-size: 21px;
    margin-top: 22px;
    gap: 24px
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0
  }
  .field {
    margin-bottom: 24px
  }
  .field label {
    font-size: 11px
  }
  .field input,.field textarea {
    font-size: 16px
  }
  .field input::placeholder,.field textarea::placeholder {
    font-size: 12px
  }
  .form-bottom {
    flex-direction: column;
    gap: 16px
  }
  .form-bottom .button {
    width: 100%
  }
  .form-note {
    max-width: 45ch;
    font-size: 10px
  }
  .form-handoff {
    padding: 18px
  }
  .footer-top {
    grid-template-columns: 1fr auto;
    gap: 32px 20px;
    padding-block: 34px
  }
  .footer-wordmark {
    grid-column: 1 / -1;
    font-size: 96px
  }

  .footer-wordmark > .footer-logo {
    width: 32px;
    height: 42px;
  }

  .footer-logo img {
    width: 72px;
    height: 72px;
    left: -18px;
    top: -13px;
  }
  .footer-top>p {
    grid-column: 1;
    grid-row: 2;
    font-size: 11px
  }
  .back-top {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    gap: 14px
  }
  .footer-bottom {
    font-size: 9px;
    gap: 14px
  }
  .footer-bottom a:nth-child(2) {
    order: 3;
    width: 100%
  }
  .seller-hero {
    padding-top: 16px;
    gap: 42px
  }
  .seller-hero .section-code {
    font-size: 9px;
    max-width: 32ch;
    margin-block: 24px
  }
  .seller-hero h1 {
    font-size: 16.3vw
  }
  .seller-hero .lead {
    font-size: 13px;
    margin-top: 26px
  }
  .seller-hero .button {
    font-size: 12px
  }
  .seller-hero__visual {
    padding: 20px
  }
  .seller-hero__label {
    margin-bottom: 24px;
    font-size: 9px
  }
  .seller-hero__visual>img {
    aspect-ratio: 1.2;
    object-position: 35% top
  }
  .integration-strip {
    font-size: 8px;
    gap: 9px
  }
  .seller-hero__visual>.text-link {
    font-size: 11px;
    gap: 18px
  }
  .ownership-grid {
    grid-template-columns: 1fr
  }
  .ownership-grid article {
    padding-block: 26px 32px
  }
  .ownership-grid article:nth-child(odd) {
    padding-right: 0
  }
  .ownership-grid article:nth-child(even) {
    border-left: 0;
    padding-left: 0
  }
  .ownership-grid h3 {
    font-size: 35px;
    margin-top: 18px
  }
  .ownership-grid p {
    margin-top: 14px;
    font-size: 12px
  }
  .integration-grid {
    grid-template-columns: 1fr;
    gap: 42px
  }

  .integrations h2 {
    font-size: clamp(38px, 12.2vw, 72px);
  }
  .integration-grid h3 {
    font-size: 58px
  }
  .integration-grid p {
    font-size: 13px
  }
  .integration-grid .text-link {
    font-size: 11px
  }
  .integration-disclaimer {
    font-size: 10px;
    margin-top: 40px
  }
  .project-footnote {
    font-size: 11px
  }
  .custom-build {
    grid-template-columns: 1fr;
    gap: 40px
  }
  .custom-build h2 br {
    display: none
  }
  .custom-build .large-copy {
    font-size: 30px
  }
  .deliverables p {
    grid-template-columns: 85px 1fr;
    gap: 18px;
    font-size: 11px
  }
  .timeline-list {
    grid-template-columns: 1fr;
    gap: 28px
  }
  .timeline-list li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px 18px;
    padding-top: 22px
  }
  .timeline-list li>span {
    grid-row: 1 / 3;
    padding-top: 9px
  }
  .timeline-list h3 {
    font-size: clamp(30px, 9vw, 35px);
    margin-top: 0
  }
  .timeline-list p {
    margin-top: 4px
  }
  .faq {
    gap: 34px
  }
  .faq__intro h2 {
    font-size: 80px
  }
  .faq-list summary {
    font-size: 13px;
    min-height: 76px;
    gap: 20px
  }
  .faq-list details>p {
    font-size: 12px
  }
  .case-hero {
    padding-top: 16px;
    padding-bottom: 48px
  }
  .case-hero__heading {
    display: block;
    margin-top: 28px
  }
  .case-hero .section-code {
    font-size: 8px
  }
  .case-hero h1 {
    font-size: 21vw;
    margin-left: -3px;
    margin-top: 12px
  }
  .case-hero__heading .text-link {
    margin-block: 18px 0
  }
  .case-hero__intro {
    font-size: 19px;
    margin-top: 26px;
    margin-bottom: 32px
  }
  .case-cover {
    margin-inline: calc(var(--gutter)*-1)
  }
  .case-cover figcaption {
    padding-inline: var(--gutter);
    font-size: 8px
  }
  .case-facts {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    margin-top: 32px
  }
  .case-facts dd {
    font-size: 11px
  }
  .case-facts dt {
    font-size: 9px
  }
  .case-story__grid {
    grid-template-columns: 1fr;
    gap: 32px
  }
  .case-story>.section-code {
    margin-bottom: 26px
  }
  .case-story h2 {
    font-size: 13.4vw
  }
  .case-story .large-copy {
    font-size: 29px
  }
  .case-story__copy>p:not(.large-copy) {
    font-size: 13px;
    margin-top: 20px
  }
  .case-gallery__grid {
    grid-template-columns: 1fr;
    gap: 40px
  }
  .case-gallery__mobile {
    width: 66%;
    margin-inline: auto;
    padding-top: 0
  }
  .case-gallery figcaption {
    font-size: 9px
  }
  .order-path {
    grid-template-columns: 1fr;
    gap: 22px
  }
  .order-path>b {
    display: none
  }
  .order-path h3 {
    font-size: 38px;
    margin-top: 16px
  }
  .order-path p {
    font-size: 12px;
    margin-top: 12px
  }
  .case-result__facts {
    grid-template-columns: 1fr;
    gap: 0
  }
  .case-result__facts strong {
    font-size: 78px
  }
  .case-result__facts>div {
    padding-block: 24px
  }
  .case-result__facts .evidence-note {
    margin-top: 20px
  }
  .case-result h2 {
    font-size: 13.5vw
  }
  .case-next a {
    font-size: 36px
  }
  .case-next>p {
    font-size: 11px
  }
}

@media(max-width:360px) {
  :root {
    --gutter: 18px
  }
  .seller-feature .button {
    font-size: 9px;
    padding-inline: 12px
  }
  .commerce-visual {
    min-height: 350px
  }
  .concept-label {
    width: 100%;
    margin-left: 0;
    order: 3
  }
  .concept summary>span:last-child {
    margin-left: auto
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *,*::before,*::after {
    animation: none!important;
    transition-duration: .01ms!important;
    scroll-behavior: auto!important
  }
  .js .reveal {
    opacity: 1;
    transform: none
  }
  .quart-engine:hover .selection-frame,.project-cover:hover>img {
    transform: none
  }
}