/* Approved 390 px mobile compositions.
   Desktop remains in styles.css; this file only overrides phone layouts. */

@media (max-width: 480px) {
  .desktop-only-break,
  .category-product-card__summary--desktop {
    display: none;
  }

  .mobile-only-break {
    display: inline;
  }

  .category-product-card__summary--mobile {
    display: inline;
  }

  .qa-mode .skip-link {
    display: none;
  }

  html,
  body {
    width: 100%;
    min-width: 320px;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background: #1b1c49;
    padding-top: calc(100vw * 67 / 390);
  }

  .shell {
    width: 100%;
    max-width: none;
    padding-inline: 7.1795%;
  }

  .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    height: calc(100vw * 67 / 390);
    min-height: 55px;
    background: #1b1c49;
    border-bottom: 1px solid rgba(136, 164, 215, 0.38);
  }

  .header-inner {
    width: 100%;
    height: calc(100vw * 66 / 390);
    min-height: 54px;
    padding-inline: 5.641%;
  }

  .brand--header,
  .brand--header .brand-logo {
    width: calc(100vw * 77 / 390);
    max-width: 86px;
  }

  .brand--header {
    overflow: hidden;
    contain: layout paint;
  }

  .brand--header .brand-logo {
    display: block;
    min-width: 0;
    height: auto;
    aspect-ratio: 208.16 / 86.59;
  }

  .menu-toggle {
    display: grid;
    width: calc(100vw * 27 / 390);
    height: calc(100vw * 22 / 390);
    min-width: 23px;
    min-height: 18px;
    margin-left: auto;
    padding: 0;
    align-content: center;
    gap: calc(100vw * 7 / 390);
  }

  .menu-toggle span {
    width: calc(100vw * 27 / 390);
    min-width: 23px;
    height: 1px;
    background: #88a4d7;
  }

  .mobile-nav {
    top: calc(100vw * 67 / 390);
    padding: 24px 28px 28px;
    background: #1b1c49;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .inner-page .site-footer,
  .route-page .site-footer {
    height: calc(100vw * 141 / 390);
    min-height: 116px;
    background: #1b1c49;
  }

  .footer-inner {
    width: 100%;
    height: 100%;
    padding: calc(100vw * 24 / 390) 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: calc(100vw * 18 / 390);
    transform: none;
  }

  .brand--footer,
  .brand--footer .brand-logo {
    width: calc(100vw * 100 / 390);
    max-width: 110px;
  }

  .footer-inner p {
    margin: 0;
    font-size: calc(100vw * 10 / 390);
    line-height: 1.2;
    text-align: center;
  }

  .breadcrumbs {
    gap: calc(100vw * 7 / 390);
    font-size: calc(100vw * 9 / 390);
    letter-spacing: 0.087em;
  }

  .reveal,
  [class*="reveal"] {
    transform: none;
  }

  /* Homepage */

  .home-design-page #main {
    position: relative;
    height: calc(100vw * 6465.2 / 390);
    background: url("assets/vectors/home-mobile-background.svg?v=20260729-7") center top / 100% 100% no-repeat;
  }

  .home-design-page #main > section {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    padding: 0;
  }

  .home-design-page .hero {
    height: calc(100vw * 663 / 390);
  }

  .home-design-page .intro {
    height: calc(100vw * 730 / 390);
  }

  .home-design-page .business {
    height: calc(100vw * 1768 / 390);
  }

  .home-design-page .services {
    height: calc(100vw * 951 / 390);
  }

  .home-design-page .performance {
    height: calc(100vw * 908 / 390);
  }

  .home-design-page .development {
    height: calc(100vw * 1445.2 / 390);
  }

  .home-design-page .contact,
  .home-design-page > .site-footer,
  .home-design-page .hero-geometry,
  .home-design-page .motif-art,
  .home-design-page .development-ribbon {
    display: none;
  }

  .home-design-page .hero-grid,
  .home-design-page .intro > .shell,
  .home-design-page .business > .shell,
  .home-design-page .services > .shell,
  .home-design-page .performance > .shell,
  .home-design-page .development > .shell {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .home-design-page .hero-brand {
    display: none;
    position: absolute;
    top: calc(100vw * 99 / 390);
    left: 17.949%;
    width: calc(100vw * 207 / 390);
    max-width: 207px;
    height: auto;
    overflow: hidden;
    contain: layout paint;
    isolation: isolate;
  }

  .home-design-page .brand--hero,
  .home-design-page .brand--hero .brand-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  .home-design-page .brand--hero .brand-logo {
    aspect-ratio: 208.16 / 86.59;
  }

  .home-design-page .hero-copy {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
  }

  .home-design-page .hero-copy h1 {
    position: absolute;
    top: calc(100vw * 208 / 390);
    left: 17.949%;
    width: 64.103%;
    margin: 0;
    font-family: var(--serif);
    font-size: calc(100vw * 40 / 390);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: 0;
  }

  .home-design-page .hero-lead {
    position: absolute;
    top: calc(100vw * 377 / 390);
    left: 18.718%;
    width: 63.59%;
    margin: 0;
    color: var(--gold);
    font-size: calc(100vw * 14 / 390);
    line-height: 1.28;
  }

  .home-design-page .hero-actions {
    position: absolute;
    top: calc(100vw * 510 / 390);
    left: 17.949%;
    width: 64.103%;
    display: grid;
    gap: calc(100vw * 10 / 390);
    margin: 0;
  }

  .home-design-page .hero-actions .button {
    width: 100%;
    height: calc(100vw * 43 / 390);
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    clip-path: none;
    font-size: calc(100vw * 12 / 390);
    transform: none;
  }

  .home-design-page .hero-actions .button--gold {
    color: var(--navy);
  }

  .home-design-page .hero-actions .button--soft {
    color: #e4e9f6;
  }

  .home-design-page .hero-actions .button:hover,
  .home-design-page .hero-actions .button:focus-visible {
    background: transparent;
    border-color: transparent;
    transform: none;
  }

  .home-design-page .intro .section-heading {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .home-design-page .intro .display-title {
    position: absolute;
    top: calc(100vw * 34 / 390);
    left: 7.1795%;
    width: 82.051%;
    margin: 0;
    font-size: calc(100vw * 45 / 390);
    line-height: 0.96;
    letter-spacing: 0;
  }

  .home-design-page .intro .section-copy {
    position: absolute;
    top: calc(100vw * 220 / 390);
    left: 7.1795%;
    width: 84.615%;
    margin: 0;
    padding: 0;
    font-size: calc(100vw * 13 / 390);
    line-height: 1.3;
  }

  .home-design-page .principles {
    position: absolute;
    top: calc(100vw * 337 / 390);
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: calc(100vw * 132 / 390);
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .home-design-page .principle {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .home-design-page .principle img {
    display: none;
  }

  .home-design-page .principle h3 {
    position: absolute;
    top: calc(100vw * 54 / 390);
    left: 25.641%;
    width: 48.718%;
    margin: 0;
    color: var(--navy);
    font-size: calc(100vw * 11 / 390);
    line-height: 1.05;
    text-align: center;
  }

  .home-design-page .business .section-heading {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .home-design-page .business .display-title {
    position: absolute;
    top: calc(100vw * 27 / 390);
    left: 18.205%;
    width: 45%;
    margin: 0;
    font-size: calc(100vw * 45 / 390);
    line-height: 0.96;
    letter-spacing: 0;
  }

  .home-design-page .business .section-copy {
    position: absolute;
    top: calc(100vw * 213 / 390);
    left: 7.1795%;
    width: 85.641%;
    margin: 0;
    padding: 0;
    font-size: calc(100vw * 13 / 390);
    line-height: 1.3;
  }

  .home-design-page .product-grid {
    position: absolute;
    top: calc(100vw * 327 / 390);
    left: 7.1795%;
    width: 85.641%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: calc(100vw * 304 / 390);
    gap: calc(100vw * 25 / 390);
    margin: 0;
  }

  .home-design-page .product-card {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    clip-path: none;
  }

  .home-design-page .product-card__image {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: calc(100vw * 176 / 390);
    clip-path: polygon(7.24% 0, 100% 0, 100% 100%, 0 100%, 0 8%);
  }

  .home-design-page .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-design-page .product-card__body,
  .home-design-page .product-card:hover .product-card__body,
  .home-design-page .product-card:focus .product-card__body,
  .home-design-page .product-card:focus-within .product-card__body {
    position: absolute;
    inset: auto 0 0;
    height: calc(100vw * 133 / 390);
    min-height: 0;
    padding: calc(100vw * 15 / 390) calc(100vw * 23 / 390);
    background: transparent;
    transform: none;
  }

  .home-design-page .product-card h3 {
    margin: 0;
    font-size: calc(100vw * 21 / 390);
    line-height: 1.1;
  }

  .home-design-page .product-card p {
    margin: calc(100vw * 10 / 390) 0 0;
    font-size: calc(100vw * 12.5 / 390);
    line-height: 1.2;
  }

  .home-design-page .product-card p,
  .home-design-page .product-card a {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .home-design-page .product-card a {
    position: absolute;
    left: calc(100vw * 23 / 390);
    bottom: calc(100vw * 22 / 390);
    font-size: calc(100vw * 10.5 / 390);
  }

  .home-design-page .business .section-action {
    position: absolute;
    top: calc(100vw * 1655 / 390);
    left: 17.949%;
    width: 64.103%;
    margin: 0;
  }

  .home-design-page .business .section-action .button {
    width: 100%;
    height: calc(100vw * 43 / 390);
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    clip-path: none;
    font-size: calc(100vw * 12 / 390);
  }

  .home-design-page .services .section-heading {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .home-design-page .services .display-title {
    position: absolute;
    top: calc(100vw * 31 / 390);
    left: 18.205%;
    width: 49%;
    margin: 0;
    font-size: calc(100vw * 45 / 390);
    line-height: 0.96;
    letter-spacing: 0;
  }

  .home-design-page .services .section-copy {
    position: absolute;
    top: calc(100vw * 169 / 390);
    left: 7.1795%;
    width: 85.641%;
    margin: 0;
    font-size: calc(100vw * 13 / 390);
    line-height: 1.3;
  }

  .home-design-page .service-grid {
    position: absolute;
    top: calc(100vw * 257 / 390);
    left: 7.1795%;
    width: 85.641%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: calc(100vw * 310 / 390);
    gap: calc(100vw * 20 / 390);
    margin: 0;
  }

  .home-design-page .service-card {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    clip-path: none;
  }

  .home-design-page .service-card > img {
    width: 100%;
    height: calc(100vw * 157 / 390);
    object-fit: cover;
  }

  .home-design-page .service-card__body {
    position: relative;
    height: calc(100vw * 153 / 390);
    min-height: 0;
    padding: calc(100vw * 14 / 390) calc(100vw * 23 / 390);
    background: transparent;
  }

  .home-design-page .service-card h3 {
    margin: 0;
    font-size: calc(100vw * 19 / 390);
    line-height: 1.08;
  }

  .home-design-page .service-card .service-meta {
    margin: calc(100vw * 8 / 390) 0 0;
    font-size: calc(100vw * 11.5 / 390);
    line-height: 1.18;
  }

  .home-design-page .service-card__body > p:not(.service-meta) {
    display: none;
  }

  .home-design-page .service-card a {
    position: absolute;
    left: calc(100vw * 23 / 390);
    bottom: calc(100vw * 14 / 390);
    font-size: calc(100vw * 10.5 / 390);
  }

  .home-design-page .service-card:nth-child(2) .service-card__body {
    height: calc(100vw * 153 / 390);
    min-height: 0;
  }

  .home-design-page .service-card:nth-child(2) .service-card__body > a {
    display: inline-flex;
  }

  .home-design-page .performance-title {
    position: absolute;
    top: calc(100vw * 47 / 390);
    left: 13.077%;
    /* по макету заголовок переносится как «Performance» / «& Scale»:
       ограничиваем ширину, иначе строка уезжает за правый край экрана */
    max-width: calc(100vw * 285 / 390);
    margin: 0;
    font-size: calc(100vw * 45 / 390);
    line-height: 0.96;
    letter-spacing: 0;
  }

  .home-design-page .metric-grid {
    position: absolute;
    top: calc(100vw * 209 / 390);
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: calc(100vw * 148 / 390);
    gap: 0;
    margin: 0;
  }

  .home-design-page .metric {
    min-height: 0;
    place-content: start center;
    gap: calc(100vw * 10 / 390);
  }

  .home-design-page .metric strong {
    font-size: calc(100vw * 58 / 390);
    line-height: 1;
  }

  .home-design-page .metric span {
    /* было 11px — дизайнер: «подписи очень мелкие»; по макету ≈13px.
       Разделительные линии над подписями рисует фоновый SVG — свои не добавляем,
       иначе они дублируются. */
    font-size: calc(100vw * 13 / 390);
    letter-spacing: 0.14em;
  }

  .home-design-page .development .story-stack {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .home-design-page .development .story {
    position: static;
    display: block;
  }

  .home-design-page .development .story-copy {
    position: absolute;
    left: 0;
    width: 100%;
  }

  .home-design-page .development .story:first-child .story-copy {
    top: calc(100vw * 27 / 390);
  }

  .home-design-page .development .story:first-child .story-image {
    position: absolute;
    top: calc(100vw * 379 / 390);
    left: 7.1795%;
  }

  .home-design-page .development .story:nth-child(2) .story-copy {
    top: calc(100vw * 717 / 390);
  }

  .home-design-page .development .story:nth-child(2) .story-image {
    position: absolute;
    top: calc(100vw * 1072 / 390);
    left: 7.1795%;
  }

  .home-design-page .story-copy .display-title {
    margin: 0 0 0 18.205%;
    font-size: calc(100vw * 49 / 390);
    line-height: 0.82;
    letter-spacing: 0;
  }

  .home-design-page .story-copy > p {
    width: 85.641%;
    margin: calc(100vw * 44 / 390) 0 0 7.1795%;
    font-size: calc(100vw * 13 / 390);
    line-height: 1.3;
  }

  .home-design-page .story-copy .story-accent {
    margin-top: calc(100vw * 17 / 390);
    color: var(--gold);
  }

  .home-design-page .development .story:first-child .story-copy > p:not(.story-accent) {
    width: 79%;
    margin-top: calc(100vw * 65.5 / 390);
  }

  .home-design-page .development .story:first-child .story-copy > .story-accent br {
    display: block;
  }

  .home-design-page .story-image {
    width: 85.641%;
    height: calc(100vw * 245 / 390);
    margin: 0;
    border: 0;
    background: transparent;
    clip-path: polygon(7% 0, 100% 0, 100% 92%, 93% 100%, 0 100%, 0 8%);
  }

  .home-design-page .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-design-page .development .story:nth-child(2) .story-copy > p:not(.story-accent) {
    width: 79%;
    margin-top: calc(100vw * 65 / 390);
  }

  .home-design-page .development .story:nth-child(2) .story-copy > .story-accent {
    margin-top: calc(100vw * 21 / 390);
    font-size: calc(100vw * 14 / 390);
  }

  .home-design-page .partner-list {
    width: 85.641%;
    margin: calc(100vw * 8 / 390) 0 0 7.1795%;
    gap: calc(100vw * 11 / 390);
    flex-wrap: nowrap;
    flex-direction: row;
  }

  .home-design-page .partner-list li {
    padding-right: 0;
    font-size: calc(100vw * 14.25 / 390);
    white-space: nowrap;
  }

  /* About */

  .about-design-page main {
    height: calc(100vw * 3627.19 / 390);
    background: url("assets/vectors/about-mobile-background.svg") center top / 100% 100% no-repeat;
  }

  .about-design-page main > section {
    position: relative;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }

  .about-design-page .about-hero {
    height: calc(100vw * 603 / 390);
  }

  .about-design-page .about-panel--business {
    height: calc(100vw * 621 / 390);
  }

  .about-design-page .about-panel--values {
    height: calc(100vw * 755 / 390);
  }

  .about-design-page .about-panel--team {
    height: calc(100vw * 639 / 390);
  }

  .about-design-page .about-panel--ahead {
    height: calc(100vw * 588 / 390);
  }

  .about-design-page .about-cta {
    height: calc(100vw * 421.19 / 390);
  }

  .about-design-page .about-panel,
  .about-design-page .about-cta {
    padding: 0;
  }

  .about-design-page .about-hero__geometry,
  .about-design-page .motif-art,
  .about-design-page .about-panel__ribbon-title > img {
    display: none;
  }

  .about-design-page .about-hero__grid,
  .about-design-page .about-panel__grid,
  .about-design-page .about-cta__grid {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .about-design-page .about-hero__heading {
    position: static;
    padding: 0;
  }

  .about-design-page .about-hero .breadcrumbs {
    position: absolute;
    top: calc(100vw * 70 / 390);
    left: 18.846%;
  }

  .about-design-page .about-hero__heading .display-title {
    position: absolute;
    top: calc(100vw * 156 / 390);
    left: 17.692%;
    margin: 0;
    font-size: calc(100vw * 54 / 390);
    line-height: 1;
  }

  .about-design-page .about-hero__intro {
    position: static;
    width: 100%;
    margin: 0;
  }

  .about-design-page .about-hero__intro p {
    position: absolute;
    left: 18.718%;
    width: 62.821%;
    margin: 0;
    font-size: calc(100vw * 15 / 390);
    line-height: 1.2;
  }

  .about-design-page .about-hero__intro p:first-child {
    top: calc(100vw * 257 / 390);
  }

  .about-design-page .about-hero__intro p + p {
    top: calc(100vw * 401 / 390);
  }

  .about-design-page .about-panel__copy {
    position: static;
    width: 100%;
  }

  .about-design-page .about-panel__copy .display-title,
  .about-design-page .about-panel__ribbon-title {
    position: absolute;
    top: calc(100vw * 28 / 390);
    left: 18.205%;
    margin: 0;
    transform: none;
  }

  .about-design-page .about-panel__ribbon-title .display-title,
  .about-design-page .about-panel__copy > .display-title {
    margin: 0;
    font-size: calc(100vw * 49 / 390);
    line-height: 0.9;
    letter-spacing: 0;
    transform: none;
  }

  .about-design-page .about-panel__copy > p {
    position: absolute;
    left: 7.1795%;
    width: 85.641%;
    margin: 0;
    font-size: calc(100vw * 14 / 390);
    line-height: 1.2;
  }

  .about-design-page .about-panel--business .about-panel__copy > p,
  .about-design-page .about-panel--team .about-panel__copy > p {
    top: calc(100vw * 169 / 390);
    margin: 0;
  }

  .about-design-page .about-panel--values .about-panel__copy > p:first-of-type {
    top: calc(100vw * 176 / 390);
  }

  .about-design-page .about-panel--values .about-panel__copy > p + p {
    top: calc(100vw * 314 / 390);
    margin: 0;
  }

  .about-design-page .about-panel--ahead .about-panel__copy > p {
    top: calc(100vw * 177 / 390);
    margin: 0;
  }

  .about-design-page .about-panel__media {
    position: absolute;
    right: auto;
    left: 7.1795%;
    width: 85.641%;
    margin: 0;
    clip-path: polygon(7% 0, 100% 0, 100% 90%, 93% 100%, 0 100%, 0 10%);
  }

  .about-design-page .about-panel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-design-page .about-panel--business .about-panel__copy > .display-title,
  .about-design-page .about-panel--team .about-panel__copy > .display-title {
    width: 56%;
  }

  .about-design-page .about-panel--business .about-panel__copy > .display-title {
    top: calc(100vw * 45 / 390);
  }

  .about-design-page .about-panel--values .about-panel__ribbon-title {
    top: calc(100vw * 16 / 390);
  }

  .about-design-page .about-panel--team .about-panel__copy > .display-title {
    top: calc(100vw * 20 / 390);
  }

  .about-design-page .about-panel--ahead .about-panel__ribbon-title {
    top: calc(100vw * 48 / 390);
  }

  .about-design-page .about-panel--business .about-panel__media {
    bottom: calc(100vw * 50 / 390);
    height: calc(100vw * 240 / 390);
  }

  .about-design-page .about-panel--values .about-panel__media {
    bottom: calc(100vw * 41 / 390);
    height: calc(100vw * 250 / 390);
  }

  .about-design-page .about-panel--team .about-panel__media {
    bottom: calc(100vw * 50 / 390);
    height: calc(100vw * 240 / 390);
  }

  .about-design-page .about-panel--ahead .about-panel__media {
    bottom: calc(100vw * 50 / 390);
    height: calc(100vw * 241 / 390);
  }

  .about-design-page .about-cta__grid > .display-title {
    position: absolute;
    top: calc(100vw * 36 / 390);
    left: 18.205%;
    margin: 0;
    font-size: calc(100vw * 49 / 390);
    line-height: 0.9;
    width: 40%;
  }

  .about-design-page .about-cta__copy {
    position: static;
    width: 100%;
    margin: 0;
  }

  .about-design-page .about-cta__copy > p {
    position: absolute;
    top: calc(100vw * 171 / 390);
    left: 7.1795%;
    width: 85.641%;
    margin: 0;
    font-size: calc(100vw * 14 / 390);
    line-height: 1.2;
  }

  .about-design-page .about-cta__actions {
    position: absolute;
    top: calc(100vw * 263 / 390);
    left: 17.949%;
    width: 64.103%;
    display: grid;
    gap: calc(100vw * 18 / 390);
    margin: 0;
  }

  .about-design-page .about-cta__actions .button {
    width: 100%;
    height: calc(100vw * 42 / 390);
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    clip-path: none;
    font-size: calc(100vw * 11 / 390);
  }

  /* Products overview */

  .products-design-page .products-showcase {
    position: relative;
    height: calc(100vw * 1767.42 / 390);
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: url("assets/vectors/products-mobile-background.svg") center top / 100% 100% no-repeat;
  }

  .products-design-page .products-showcase__hero-art,
  .products-design-page .products-showcase__lower-art {
    display: none;
  }

  .products-design-page .products-showcase__intro,
  .products-design-page .products-showcase__grid {
    position: static;
    width: 100%;
    height: auto;
    padding: 0;
  }

  .products-design-page .products-showcase .breadcrumbs {
    position: absolute;
    top: calc(100vw * 70 / 390);
    left: 18.846%;
    letter-spacing: 0.1em;
  }

  .products-design-page .products-showcase__heading .display-title {
    position: absolute;
    top: calc(100vw * 151 / 390);
    left: 17.692%;
    margin: 0;
    font-size: calc(100vw * 54 / 390);
    line-height: 1;
    transform: none;
  }

  .products-design-page .products-showcase__intro > p {
    position: absolute;
    top: calc(100vw * 256 / 390);
    left: 18.718%;
    width: 60.256%;
    margin: 0;
    font-size: calc(100vw * 15 / 390);
    line-height: 1.2;
  }

  .products-design-page .products-showcase__grid {
    position: absolute;
    top: calc(100vw * 408 / 390);
    left: 7.1795%;
    width: 85.641%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: calc(100vw * 306 / 390);
    gap: calc(100vw * 23 / 390);
    margin: 0;
  }

  .products-design-page .product-card {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    clip-path: polygon(
      calc(100vw * 24 / 390) 0,
      100% 0,
      100% calc(100% - calc(100vw * 14 / 390)),
      calc(100% - calc(100vw * 24 / 390)) 100%,
      0 100%,
      0 calc(100vw * 14 / 390)
    );
  }

  .products-design-page .product-card__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: calc(100vw * 177 / 390);
  }

  .products-design-page .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .products-design-page .product-card__body,
  .products-design-page .product-card:hover .product-card__body,
  .products-design-page .product-card:focus .product-card__body,
  .products-design-page .product-card:focus-within .product-card__body {
    position: relative;
    inset: auto;
    height: calc(100vw * 129 / 390);
    min-height: 0;
    padding: calc(100vw * 10 / 390) calc(100vw * 23 / 390);
    background: transparent;
    transform: none;
  }

  .products-design-page .product-card h2 {
    margin: 0;
    font-size: calc(100vw * 21 / 390);
    line-height: 1.1;
  }

  .products-design-page .product-card p {
    margin: calc(100vw * 10 / 390) 0 0;
    font-size: calc(100vw * 13 / 390);
    line-height: 1.15;
  }

  .products-design-page .product-card p,
  .products-design-page .product-card a {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .products-design-page .product-card a {
    position: absolute;
    left: calc(100vw * 23 / 390);
    bottom: calc(100vw * 23 / 390);
    font-size: calc(100vw * 10.5 / 390);
  }

  /* Category templates */

  .category-design-page main {
    background: #ccddff;
  }

  .category-design-page .category-template-hero {
    position: relative;
    height: calc(100vw * 420 / 390);
    min-height: 0;
    overflow: hidden;
    background: url("assets/vectors/category-mobile-hero.svg") center top / 100% 100% no-repeat;
    padding: 0;
  }

  .category-design-page .category-template-hero__geometry,
  .category-design-page .category-template-portfolio__art {
    display: none;
  }

  .category-design-page .category-template-hero__grid,
  .category-design-page .category-template-hero__copy {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .category-design-page .category-template-hero .breadcrumbs {
    position: absolute;
    top: calc(100vw * 70 / 390);
    left: 18.846%;
  }

  .category-design-page .category-template-hero__copy .display-title {
    position: absolute;
    top: calc(100vw * 156 / 390);
    left: 17.692%;
    margin: 0;
    font-size: calc(100vw * 54 / 390);
    line-height: 1;
    transform: none;
  }

  .category-design-page .category-template-hero__intro {
    position: absolute;
    top: calc(100vw * 251 / 390);
    left: 18.718%;
    width: 60.256%;
    margin: 0;
    font-size: calc(100vw * 15 / 390);
    line-height: 1.2;
  }

  .category-design-page .category-template-portfolio {
    min-height: 0;
    overflow: hidden;
    background: #ccddff;
    padding: 0;
  }

  .category-design-page .category-template-portfolio__inner {
    width: 100%;
    padding: calc(100vw * 44 / 390) 7.1795% calc(100vw * 60 / 390);
  }

  .category-design-page .category-product-grid {
    display: flex;
    flex-direction: column;
    gap: calc(100vw * 24 / 390);
  }

  .category-design-page .category-product-card {
    width: 100%;
    height: calc(100vw * 178 / 390);
    min-height: 0;
    padding: calc(100vw * 18 / 390) calc(100vw * 26 / 390) calc(100vw * 17 / 390);
    background: #fff;
    box-shadow: none;
    clip-path: polygon(6% 0, 100% 0, 100% 91%, 94% 100%, 0 100%, 0 9%);
    transform: none;
  }

  .category-design-page .category-product-card:hover,
  .category-design-page .category-product-card:focus-visible {
    background: #fff;
    box-shadow: none;
    transform: none;
  }

  .category-design-page .category-product-card__top {
    height: calc(100vw * 64 / 390);
    min-height: 0;
    grid-template-columns: 34.75% minmax(0, 1fr);
    gap: 6.0%;
    align-items: center;
  }

  .category-design-page .category-product-card__top > strong,
  .category-design-page .category-product-card__top > .category-product-card__badge--compact {
    font-size: calc(100vw * 49 / 390);
    line-height: 0.88;
    letter-spacing: -0.05em;
    align-self: center;
  }

  .category-design-page .category-product-card__top > .category-product-card__badge--compact {
    font-size: calc(100vw * 36 / 390);
    letter-spacing: -0.04em;
  }

  .category-design-page .category-product-card__top > strong:has(br) {
    font-size: calc(100vw * 36 / 390);
    line-height: 0.92;
  }

  .category-design-page .category-product-card__top > h2 {
    margin: 0;
    font-size: calc(100vw * 15 / 390);
    line-height: 1.2;
    align-self: center;
  }

  .category-design-page .category-product-card > p {
    display: block;
    height: calc(100vw * 47 / 390);
    min-height: 0;
    margin: calc(100vw * 5 / 390) 0 0;
    overflow: hidden;
    font-size: calc(100vw * 13 / 390);
    line-height: 1.2;
    -webkit-line-clamp: unset;
  }

  .category-design-page .category-product-card > span {
    margin-top: calc(100vw * 4 / 390);
    font-size: calc(100vw * 10.5 / 390);
  }

  .category-design-page .category-template-cta {
    width: 64.103%;
    height: calc(100vw * 43 / 390);
    min-height: 0;
    margin: calc(100vw * 50 / 390) auto 0;
    padding: 0;
    color: #fff;
    background: var(--gold);
    border: 0;
    clip-path: polygon(6% 0, 94% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
    font-size: calc(100vw * 13 / 390);
  }

  .category-alcohols main {
    height: calc(100vw * 1807.01 / 390);
    background: url("assets/vectors/alcohols-mobile-background.svg") center top / 100% 100% no-repeat;
  }

  .category-alcohols .category-template-portfolio {
    height: calc(100vw * 1387.01 / 390);
    background: transparent;
  }

  .category-food-chemicals .category-template-hero__intro,
  .category-animal-farming .category-template-hero__intro {
    top: calc(100vw * 276 / 390);
  }

  .category-alcohols .category-template-portfolio__inner {
    height: 100%;
  }

  .category-alcohols .category-product-card,
  .category-alcohols .category-product-card:hover,
  .category-alcohols .category-product-card:focus-visible,
  .category-alcohols .category-template-cta,
  .category-alcohols .category-template-cta:hover,
  .category-alcohols .category-template-cta:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    clip-path: none;
    transform: none;
  }

  .category-alcohols .category-product-grid > :nth-child(1) { order: 1; }
  .category-alcohols .category-product-grid > :nth-child(2) { order: 4; }
  .category-alcohols .category-product-grid > :nth-child(3) { order: 2; }
  .category-alcohols .category-product-grid > :nth-child(4) { order: 5; }
  .category-alcohols .category-product-grid > :nth-child(5) { order: 3; }
  .category-alcohols .category-product-grid > :nth-child(6) { order: 6; }

  /* Product detail template */

  .product-design-page main {
    background: #1b1c49;
  }

  .product-design-page .product-template-hero {
    position: relative;
    height: calc(100vw * 721 / 390);
    min-height: 0;
    overflow: hidden;
    background: url("assets/vectors/product-mobile-hero.svg") center top / 100% 100% no-repeat;
    padding: 0;
  }

  .product-design-page .product-template-hero__geometry {
    display: none;
  }

  .product-design-page .product-template-hero__grid,
  .product-design-page .product-template-hero__copy {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .product-design-page .product-template-hero .breadcrumbs {
    position: absolute;
    top: calc(100vw * 70 / 390);
    left: 18.846%;
    width: 75%;
    margin: 0;
  }

  .product-design-page .product-template-hero__copy .display-title {
    position: absolute;
    top: calc(100vw * 158 / 390);
    left: 18.205%;
    width: 63.59%;
    margin: 0;
    font-size: calc(100vw * 45 / 390);
    line-height: 0.96;
    letter-spacing: 0;
  }

  .product-design-page .product-template-hero__copy .display-title > span {
    display: block;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .product-design-page .product-template-hero__link {
    position: absolute;
    top: calc(100vw * 405 / 390);
    left: 18.846%;
    margin: 0;
    font-size: calc(100vw * 8 / 390);
  }

  .product-design-page .product-template-hero__media {
    position: absolute;
    bottom: 0;
    left: 7.1795%;
    width: 85.641%;
    height: calc(100vw * 239 / 390);
    margin: 0;
    clip-path: polygon(18% 0, 100% 0, 100% 85%, 82% 100%, 0 100%, 0 15%);
  }

  .product-design-page .product-template-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-design-page .product-template-description {
    position: relative;
    height: auto;
    min-height: calc(100vw * 286 / 390);
    background: url("assets/vectors/product-mobile-description.svg") center top / 100% 100% no-repeat #fff;
    padding: 0;
  }

  .product-design-page .product-template-description__grid {
    position: relative;
    display: block;
    width: 100%;
    min-height: calc(100vw * 286 / 390);
    padding: 0;
  }

  .product-design-page .product-template-description .display-title {
    position: absolute;
    top: calc(100vw * 33 / 390);
    left: 7.1795%;
    margin: 0;
    color: #88a4d7;
    font-size: calc(100vw * 53.5 / 390);
    line-height: 1;
  }

  .product-design-page .product-template-description p {
    width: 86.667%;
    margin: 0;
    padding: calc(100vw * 112 / 390) 0 calc(100vw * 38 / 390);
    margin-left: 6.667%;
    font-size: calc(100vw * 12 / 390);
    line-height: 1.25;
  }

  .product-design-page .product-template-uses {
    position: relative;
    min-height: calc(100vw * 610 / 390);
    overflow: hidden;
    background: url("assets/vectors/product-mobile-uses.svg") center top / 100% auto no-repeat #ccddff;
    padding: 0;
  }

  .product-design-page .product-template-uses__art,
  .product-design-page .product-template-title > img {
    display: none;
  }

  .product-design-page .product-template-uses > .shell {
    width: 100%;
    padding: 0;
  }

  .product-design-page .product-template-title--uses {
    position: absolute;
    top: calc(100vw * 39 / 390);
    left: 18.205%;
    margin: 0;
    min-height: 0;
    padding: 0;
  }

  .product-design-page .product-template-title--uses .display-title {
    margin: 0;
    font-size: calc(100vw * 49 / 390);
    line-height: 0.9;
    letter-spacing: 0;
  }

  .product-design-page .product-template-uses__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(100vw * 26 / 390);
    width: 85.641%;
    margin: 0 0 0 7.1795%;
    padding: calc(100vw * 179 / 390) 0 calc(100vw * 76 / 390);
  }

  .product-design-page .use-card {
    width: 100%;
    height: auto;
    min-height: calc(100vw * 165 / 390);
    padding: calc(100vw * 21 / 390) calc(100vw * 26 / 390) calc(100vw * 27 / 390);
    background: #fff;
    border: 0;
    clip-path: polygon(8% 0, 100% 0, 100% 91%, 92% 100%, 0 100%, 0 9%);
  }

  .product-design-page .use-card > span {
    font-size: calc(100vw * 25.5 / 390);
    line-height: 1;
  }

  .product-design-page .use-card > p {
    margin-top: calc(100vw * 19 / 390);
    font-size: calc(100vw * 13 / 390);
    line-height: 1.2;
  }

  .product-design-page .product-template-request {
    position: relative;
    height: calc(100vw * 1695.95 / 390);
    min-height: 0;
    overflow: hidden;
    background: url("assets/vectors/product-mobile-request.svg") center top / 100% 100% no-repeat #1b1c49;
    padding: 0;
  }

  .product-design-page .product-template-request__grid {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .product-design-page .documents-panel,
  .product-design-page .lead-panel {
    position: static;
    width: 100%;
  }

  .product-design-page .documents-panel .product-template-title {
    position: absolute;
    top: calc(100vw * 40 / 390);
    left: 18.205%;
    width: 72%;
    letter-spacing: 0.075em;
    margin: 0;
    padding: 0;
  }

  .product-design-page .lead-panel .product-template-title {
    position: absolute;
    top: calc(100vw * 721 / 390);
    left: 18.205%;
    width: 72%;
    margin: 0;
    padding: 0;
  }

  .product-design-page .product-template-title .section-label {
    margin: 0 0 calc(100vw * 25 / 390) !important;
    font-size: calc(100vw * 8 / 390);
  }

  .product-design-page .product-template-request .display-title {
    margin: 0;
    font-size: calc(100vw * 49 / 390);
    line-height: 0.9;
    letter-spacing: 0;
  }

  .product-design-page .documents-panel > p,
  .product-design-page .lead-panel > p {
    position: absolute;
    left: 7.1795%;
    width: 85.641%;
    margin: 0;
    color: #8da3d6;
    font-size: calc(100vw * 15 / 390);
    line-height: 1.12;
  }

  .product-design-page .documents-panel > p {
    top: calc(100vw * 208 / 390);
  }

  .product-design-page .lead-panel > p {
    top: calc(100vw * 889 / 390);
  }

  .product-design-page .documents-panel > ul {
    position: absolute;
    top: calc(100vw * 322 / 390);
    left: 7.1795%;
    width: 85.641%;
    display: grid;
    gap: calc(100vw * 24 / 390);
    margin: 0;
  }

  .product-design-page .documents-panel > ul > li {
    width: 100%;
    height: calc(100vw * 64 / 390);
    min-height: 0;
    padding: 0 calc(100vw * 13 / 390);
    grid-template-columns: calc(100vw * 51 / 390) 1fr calc(100vw * 83 / 390);
    gap: calc(100vw * 14 / 390);
    background: transparent;
    border: 0;
    clip-path: none;
  }

  .product-design-page .documents-panel > ul > li > span {
    font-size: calc(100vw * 15 / 390);
  }

  .product-design-page .documents-panel > ul > li > strong {
    font-size: calc(100vw * 12 / 390);
    line-height: 1.5;
  }

  .product-design-page .documents-panel > ul > li > em {
    color: #d7dcef;
    font-size: calc(100vw * 10 / 390);
    line-height: 1.4;
    grid-column: auto;
  }

  .product-design-page .detail-lead-form {
    position: absolute;
    top: calc(100vw * 980 / 390);
    left: 7.1795%;
    width: 85.641%;
    display: grid;
    gap: calc(100vw * 16 / 390);
    margin: 0;
  }

  .product-design-page .detail-lead-form .form-row {
    display: contents;
  }

  .product-design-page .detail-lead-form label {
    display: block;
  }

  .product-design-page .detail-lead-form input,
  .product-design-page .detail-lead-form textarea {
    display: block;
    width: 100%;
    padding-inline: calc(100vw * 16 / 390);
    color: #c7cee3;
    background: transparent;
    border: 0;
    clip-path: none;
    font-size: calc(100vw * 15 / 390);
  }

  .product-design-page .detail-lead-form input {
    height: calc(100vw * 53 / 390);
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
  }

  .product-design-page .detail-lead-form textarea {
    height: calc(100vw * 148 / 390);
    min-height: 0;
    padding-top: calc(100vw * 15 / 390);
    line-height: 1.25;
    resize: none;
  }

  .product-design-page .detail-lead-form .button--form {
    width: 100%;
    height: calc(100vw * 67 / 390);
    min-height: 0;
    margin-top: calc(100vw * 12 / 390);
    padding: 0;
    background: transparent;
    border: 0;
    clip-path: none;
    font-size: calc(100vw * 15 / 390);
    line-height: 1;
  }

  .product-design-page .detail-lead-form .form-note {
    width: 100%;
    margin: 0;
    font-size: calc(100vw * 13 / 390);
    line-height: 1.2;
    text-align: left;
  }

  .product-design-page .product-template-more {
    right: auto;
    bottom: calc(100vw * 56 / 390);
    left: 17.949%;
    width: 64.103%;
    min-width: 0;
    height: calc(100vw * 43 / 390);
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    clip-path: none;
    font-size: calc(100vw * 14 / 390);
    transform: none;
  }

  .product-design-page .product-template-more:hover,
  .product-design-page .product-template-more:focus-visible {
    color: var(--gold);
    background: transparent;
    transform: none;
  }

  .product-ena-96 main {
    height: calc(100vw * 3312.95 / 390);
    background: url("assets/vectors/ena-mobile-background.svg") center top / 100% 100% no-repeat;
  }

  .product-ena-96 .product-template-hero__copy .display-title > span {
    width: calc(100vw * 245 / 390);
    white-space: normal;
  }

  .product-ena-96 .product-template-hero__copy .display-title {
    top: calc(100vw * 155 / 390);
    font-size: calc(100vw * 49 / 390);
    line-height: 0.9;
  }

  .product-ena-96 .product-template-hero,
  .product-ena-96 .product-template-description,
  .product-ena-96 .product-template-uses,
  .product-ena-96 .product-template-request {
    background: transparent;
  }

  .product-ena-96 .use-card {
    height: calc(100vw * 165 / 390);
    min-height: 0;
    background: transparent;
    border-color: transparent;
    clip-path: none;
  }

  .product-pharma-96 .product-template-hero__copy .display-title {
    font-size: calc(100vw * 41 / 390);
  }

  .product-fuel-99-9 .product-template-hero__copy .display-title,
  .product-industrial-99 .product-template-hero__copy .display-title,
  .product-heads-tails .product-template-hero__copy .display-title,
  .product-ddgs .product-template-hero__copy .display-title,
  .product-liquid-co2 .product-template-hero__copy .display-title {
    font-size: calc(100vw * 34 / 390);
  }

  .product-denatured .product-template-hero__copy .display-title,
  .product-citric-monohydrate .product-template-hero__copy .display-title,
  .product-citric-anhydrous .product-template-hero__copy .display-title {
    font-size: calc(100vw * 39 / 390);
  }

  /* Services/contact pages without dedicated mobile artboards retain their
     content but inherit the approved mobile typography, spacing and header. */

  .route-page:not(.category-design-page):not(.product-design-page) main,
  .inner-page:not(.about-design-page):not(.products-design-page) main {
    overflow-x: hidden;
  }
}