:root {
  --spruce: #1c3c2c;
  --algae: #4c5c3c;
  --peanut: #9c744c;
  --bark: #382418;
  --ash: #d0d4d0;
  --bone: #f0e8dc;
  --asphalt: #292b2c;
  --on-green: #f0e8dc;
  --bone-pale: color-mix(in srgb, var(--bone) 86%, white);
  --bone-warm: color-mix(in srgb, var(--bone) 92%, var(--peanut));
  --bone-deep: color-mix(in srgb, var(--bone) 82%, var(--peanut));
  --white: color-mix(in srgb, var(--bone) 90%, var(--peanut));
  --ink: #382418;
  --muted: #6a5848;
  --line: rgba(56, 36, 24, 0.12);
  --radius: 0;
  --radius-sm: 0;
  --pill: 0;
  --shadow: none;
  --gutter: clamp(16px, 3.2vw, 96px);
  --flag-w: 86px;
  --flag-gap: 12px;
  --flag-inset: 10px;
  --rail: calc(var(--flag-inset) + var(--flag-w) + var(--flag-gap));
  --nav-pad-x: 12px;
  --paper-grid:
    linear-gradient(rgba(56, 36, 24, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 36, 24, .08) 1px, transparent 1px);
  --paper-size: 32px 32px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background-color: var(--bone);
  color: var(--ink);
  font-family: Manrope, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block }
a { color: inherit }
h1, h2, h3 { margin: 0; color: var(--asphalt); letter-spacing: -0.035em; line-height: 1.12; font-weight: 700 }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem) }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem) }
h3 { font-size: 1.15rem }
p { margin: 0 }
.wrap,
.top__bar,
.note,
.nav {
  width: auto;
  max-width: none;
  margin-left: var(--gutter);
  margin-right: var(--rail);
}

.kicker {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--asphalt);
}

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  background: var(--bone-deep);
  color: #151515;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.top__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.top__pattern::before {
  content: "";
  position: absolute;
  inset: -120px;
  background: var(--bark);
  opacity: .045;
  -webkit-mask-image: url("/media/logos/mark-pattern.png");
  mask-image: url("/media/logos/mark-pattern.png");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: clamp(62px, 5.4vw, 86px) auto;
  mask-size: clamp(62px, 5.4vw, 86px) auto;
  transform: rotate(-12deg) scale(1.05);
  transform-origin: center;
}
.top__bar {
  position: relative;
  z-index: 1;
  min-height: 76px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding-inline-start: var(--nav-pad-x);
}
.top__cluster {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top__mail { font-size: 0.88rem; color: #151515; text-decoration: none }
.icon-link { font-size: 0.88rem; text-decoration: none; color: #151515; font-weight: 600 }

.flag {
  --flag-h: 228px;
  position: fixed;
  top: 0;
  right: var(--flag-inset);
  z-index: 50;
  width: var(--flag-w);
  height: var(--flag-h);
  display: block;
  text-decoration: none;
  overflow: visible;
}
.flag__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--spruce);
  clip-path: polygon(0 0, 100% 0, 100% 91.2%, 50% 100%, 0 91.2%);
  transition: opacity .12s ease;
}
.flag__fallback img {
  width: 74%;
  height: auto;
  transform: translateY(-8px);
}
.flag.is-ready .flag__fallback {
  opacity: 0;
  pointer-events: none;
}
.flag__view {
  display: block;
  position: relative;
  z-index: 1;
  left: -14px;
  width: calc(100% + 28px);
  height: 100%;
}

.nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px 4px;
  padding: 0 0 14px;
}
.nav__item { position: relative }
.nav a {
  display: inline-flex;
  padding: 8px var(--nav-pad-x);
  text-decoration: none;
  color: #151515;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--pill);
}
.nav a:hover, .nav a.is-active { background: transparent; box-shadow: inset 0 -1px 0 var(--bark) }
.drop {
  display: none;
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  min-width: 240px;
  padding: 8px;
  background: var(--white);
  border-radius: 0;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.drop a { display: block; border-radius: 0 }
.has-drop:hover .drop, .has-drop:focus-within .drop { display: block }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--pill);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.btn--primary { background: var(--spruce); color: var(--on-green) }
.btn--ghost { background: transparent; color: var(--spruce); box-shadow: inset 0 0 0 1.5px var(--spruce) }
.btn--light { background: var(--bone); color: var(--spruce) }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.86rem }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px }

.breadcrumbs {
  margin-bottom: clamp(18px, 2vw, 28px);
  color: var(--muted);
  font-size: .75rem;
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 7px;
  opacity: .55;
}
.breadcrumbs a {
  color: inherit;
  text-underline-offset: 3px;
}
.shell-breadcrumbs {
  background-color: var(--bone-pale);
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 12%, transparent);
}
.shell-breadcrumbs .breadcrumbs {
  margin: 0;
  padding: 12px 0;
}
.hero--gallery .breadcrumbs {
  color: color-mix(in srgb, var(--on-green) 72%, transparent);
}

.hero { padding: clamp(28px, 3vw, 56px) 0 12px }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, min(42vw, 880px));
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.hero__grid:not(:has(.hero__visual)) {
  grid-template-columns: minmax(0, 1fr);
}
.hero__copy { min-width: 0 }
main > .hero:not(.hero--gallery) h1 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
}
.hero__lead, .section__lead {
  max-width: min(52ch, 100%);
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 16px;
}
.hero__visual {
  min-height: 0;
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  padding: 0;
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero--gallery {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: calc(100svh - 130px);
  overflow: hidden;
  align-items: stretch;
  background: #111;
  color: var(--on-green);
}
.hero--gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 12, 11, .84) 0%, rgba(10, 12, 11, .66) 44%, rgba(10, 12, 11, .42) 100%),
    linear-gradient(0deg, rgba(10, 12, 11, .34), transparent 42%);
}
.hero__gallery {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #111;
}
.hero__gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  animation: hero-gallery-cycle 24s linear infinite both;
}
.hero__gallery img:nth-child(1) { animation-delay: -1s }
.hero__gallery img:nth-child(2) { animation-delay: 5s }
.hero__gallery img:nth-child(3) { animation-delay: 11s }
.hero__gallery img:nth-child(4) { animation-delay: 17s }
.hero--gallery .hero__grid {
  position: relative;
  z-index: 2;
  flex: 1;
}
.hero--gallery .hero__copy { max-width: 760px }
.hero--gallery h1 { color: var(--on-green) }
.hero--gallery .kicker,
.hero--gallery .hero__lead,
.hero--gallery .facts dd {
  color: color-mix(in srgb, var(--on-green) 84%, transparent);
}
.hero--gallery .facts dt { color: var(--on-green) }
.hero--gallery .btn--ghost {
  color: var(--on-green);
  background: rgba(10, 12, 11, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
main > .hero.hero--gallery { background: #111 }
@keyframes hero-gallery-cycle {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  4%, 25% { opacity: 1 }
  29%, 100% {
    opacity: 0;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__gallery img {
    opacity: 0;
    transform: none;
    animation: none;
  }
  .hero__gallery img:first-child { opacity: 1 }
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  margin: 28px 0 0;
}
.facts dt { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.04em }
.facts dd { margin: 2px 0 0; color: var(--muted); font-size: 0.86rem }

.section { padding: clamp(48px, 5.5vw, 112px) 0 }
.section--dark { background: var(--bark); color: var(--bone) }
.section--spruce { background: var(--bark); color: var(--bone) }
.section--dark h1,
.section--dark h2,
.section--spruce h1,
.section--spruce h2,
.lead h1,
.lead h2,
.foot h1,
.foot h2,
.section--dark > .wrap > .section__head .kicker,
.section--spruce > .wrap > .section__head .kicker { color: var(--on-green) }
main > .hero:not(.hero--gallery) {
  background-color: var(--bone-pale);
}
main > .section:not(.section--dark):not(.section--spruce) {
  border-top: 1px solid color-mix(in srgb, var(--bark) 10%, transparent);
}
main > .section:not(.section--dark):not(.section--spruce):nth-of-type(3n + 1) {
  background-color: var(--bone-pale);
}
main > .section:not(.section--dark):not(.section--spruce):nth-of-type(3n + 2) {
  background-color: var(--bone-warm);
}
main > .section:not(.section--dark):not(.section--spruce):nth-of-type(3n) {
  background-color: var(--bone-deep);
}
.section__head { display: grid; gap: 10px; margin-bottom: 28px }
.section__head .btn { justify-self: start }
.section__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
html.has-scroll-reveal,
html.has-scroll-reveal body { overflow-x: clip }
.page-home main > .section { overflow-x: clip }
html.has-scroll-reveal .page-home .section__head:not(.section__head--static) {
  --reveal-distance: clamp(110px, 22vw, 360px);
  opacity: 0;
  transform: translate3d(var(--reveal-distance), 0, 0);
  transition:
    transform .72s cubic-bezier(.2,.78,.18,1),
    opacity .42s ease;
  will-change: transform, opacity;
}
html.has-scroll-reveal .page-home .section__head:not(.section__head--static).is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html.has-scroll-reveal .page-home .section__head:not(.section__head--static).is-past {
  opacity: 0;
  transform: translate3d(calc(-1 * var(--reveal-distance)), 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html.has-scroll-reveal .page-home .section__head:not(.section__head--static) {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.card--soft { background: color-mix(in srgb, var(--bone) 82%, var(--peanut)) }

.grid-2, .grid-3 {
  display: grid;
  container-type: inline-size;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }

.grid-3.audience-drops {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 96px);
  border: 0;
}
.grid-3.audience-drops > .tile {
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border: 0;
}
.audience-drops .tile__body {
  height: auto;
  align-content: start;
  padding: 0;
}
html.has-audience-drops .audience-drops > .tile {
  --audience-x: clamp(140px, 18vw, 340px);
  opacity: 0;
  transform: translate3d(var(--audience-x), 0, 0);
  transition:
    transform .78s cubic-bezier(.16, 1, .3, 1),
    opacity .38s ease;
  will-change: transform, opacity;
}
html.has-audience-drops .audience-drops > .tile:nth-child(2) {
  --audience-x: clamp(180px, 22vw, 420px);
  transition-delay: .1s;
}
html.has-audience-drops .audience-drops > .tile:nth-child(3) {
  --audience-x: clamp(220px, 26vw, 500px);
  transition-delay: .2s;
}
html.has-audience-drops .audience-drops.is-visible > .tile {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
html.has-audience-drops .audience-drops.is-past > .tile {
  opacity: 0;
  transform: translate3d(calc(-1 * var(--audience-x)), 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  html.has-audience-drops .audience-drops > .tile {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.mosaic {
  display: grid;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 3 / 1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.mosaic--compact { aspect-ratio: 4 / 1 }
.mosaic.mosaic--five > .tile:nth-child(4),
.mosaic.mosaic--five > .tile:nth-child(5) {
  grid-column: span 2;
}
.mosaic > .tile {
  min-width: 0;
  min-height: 0;
}
.mosaic > .tile:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.mosaic > .tile:nth-child(2),
.mosaic > .tile:nth-child(3),
.mosaic > .tile:nth-child(6) {
  grid-column: span 2;
}
.mosaic .tile__body {
  height: 100%;
  align-content: end;
}
.mosaic > .tile:first-child .tile__body {
  padding: clamp(24px, 3vw, 56px);
}
.mosaic > .tile:first-child h3 {
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
}
.mosaic > .tile:first-child .tile__body p {
  max-width: 38ch;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
}

.project-ribbon-shell {
  position: relative;
}
.project-ribbon__toggle {
  min-width: 112px;
}
.project-band {
  --project-tile-size: clamp(132px, 11.8vw, 188px);
  --project-fade: clamp(28px, 5vw, 84px);
  width: 100%;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--project-fade),
    #000 calc(100% - var(--project-fade)),
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--project-fade),
    #000 calc(100% - var(--project-fade)),
    transparent
  );
}
.project-band__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.project-band__group {
  display: flex;
  flex: none;
}
.project-band__identity,
.project-band__photo {
  position: relative;
  display: block;
  flex: 0 0 var(--project-tile-size);
  width: var(--project-tile-size);
  height: var(--project-tile-size);
  overflow: hidden;
  border-right: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  transition:
    width .56s cubic-bezier(.16, 1, .3, 1),
    height .56s cubic-bezier(.16, 1, .3, 1),
    flex-basis .56s cubic-bezier(.16, 1, .3, 1);
}
.project-ribbon-shell.is-expanded .project-band {
  --project-tile-size: clamp(240px, 24vw, 420px);
}
.project-band__identity {
  container-type: inline-size;
  color: var(--asphalt);
  background: var(--bone);
  text-decoration: none;
  transition: background-color .25s ease;
}
.project-band__identity:hover {
  background: color-mix(in srgb, var(--bone) 80%, var(--peanut));
}
.project-band__identity-body {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(12px, 8cqi, 18px);
}
.project-band__logo {
  display: flex;
  width: min(76%, 118px);
  height: clamp(26px, 24cqi, 48px);
  align-items: center;
  justify-content: flex-start;
}
.project-band__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
}
.project-band__logo--inverse {
  width: clamp(34px, 25cqi, 50px);
  height: clamp(34px, 25cqi, 50px);
  padding: clamp(5px, 4cqi, 8px);
  background: var(--bark);
}
.project-band__copy {
  display: grid;
  gap: 4px;
}
.project-band__copy .kicker {
  color: currentColor;
  font-size: clamp(.5rem, 4cqi, .65rem);
  opacity: .68;
}
.project-band__copy strong {
  font-size: clamp(.8rem, 7.5cqi, 1.08rem);
  line-height: 1.08;
}
.project-band__text {
  font-size: clamp(.62rem, 4.8cqi, .76rem);
  line-height: 1.25;
  opacity: .72;
}
.project-band__photo {
  background: color-mix(in srgb, var(--bone) 90%, var(--peanut));
}
.project-band__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-photo-preview {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 80px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(20, 22, 22, .24);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.project-photo-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(86vw, 1480px);
  max-height: 82vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(.72);
  box-shadow: 0 24px 72px rgba(12, 13, 13, .32);
  transition: opacity .24s ease, transform .42s cubic-bezier(.16, 1, .3, 1);
}
.project-photo-preview.is-visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.project-photo-preview.is-visible img {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 820px) {
  .project-band {
    --project-tile-size: clamp(118px, 36vw, 148px);
    --project-fade: 24px;
  }
  .project-ribbon-shell.is-expanded .project-band {
    --project-tile-size: min(76vw, 280px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-band {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .project-band__track {
    transform: none !important;
    will-change: auto;
  }
  .project-band__group[aria-hidden="true"],
  .project-band__group > [aria-hidden="true"] { display: none }
  .project-photo-preview,
  .project-photo-preview img { transition: none }
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow);
  min-height: 100%;
  transition: color .18s ease, background-color .18s ease;
}
.grid-2 > .tile,
.grid-3 > .tile,
.mosaic > .tile {
  border-right: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.tile:hover {
  background: color-mix(in srgb, var(--bone) 78%, var(--peanut));
  transform: none;
}
.tile__media {
  background: var(--peanut);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
}
.tile__media img { width: 100%; height: 100%; object-fit: cover }
.tile__media img[src*="/logos/"] {
  width: auto;
  height: auto;
  max-height: 42%;
  object-fit: contain;
  margin: 28% auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.tile__body { padding: 22px 22px 24px; display: grid; gap: 8px }
.tile--logo .tile__body {
  flex: 1;
  grid-template-rows: minmax(64px, 1fr) auto auto auto;
  align-content: stretch;
}
.tile__logo {
  display: flex;
  width: min(100%, clamp(60px, 12cqi, 190px));
  height: clamp(24px, 4.5cqi, 72px);
  align-items: center;
  justify-content: flex-start;
  align-self: start;
}
.tile__logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
}
.tile__logo--inverse {
  width: clamp(28px, 4.6cqi, 68px);
  height: clamp(28px, 4.6cqi, 68px);
  padding: clamp(5px, 0.75cqi, 12px);
  border-radius: 0;
  background: var(--bark);
  box-sizing: border-box;
}
.tile__body p { color: var(--muted); font-size: 0.95rem }
.tile__body .kicker { color: var(--asphalt) }
.tile__meta { font-size: 0.8rem !important; color: var(--peanut) !important }
.tile__details {
  display: grid;
  gap: 7px;
  margin: 4px 0 0;
  padding-left: 1.15em;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.42;
}

.process-catalog {
  --process-route: color-mix(in srgb, var(--peanut) 78%, var(--bark));
  border-top: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.process-catalog__toolbar {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(16px, 2.4vw, 34px);
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.process-catalog__chapter {
  display: grid;
  gap: 3px;
}
.process-catalog__chapter .kicker { margin: 0 }
.process-catalog__chapter strong {
  font-size: clamp(1rem, 1.45vw, 1.35rem);
}
.process-catalog__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.process-catalog__status {
  min-width: 54px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
}
.process-catalog__controls button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--asphalt);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--bark) 34%, transparent);
  border-radius: 0;
  cursor: pointer;
  font: 700 1.15rem/1 Manrope, sans-serif;
}
.process-catalog__controls button:hover:not(:disabled) {
  color: var(--bone);
  background: var(--asphalt);
}
.process-catalog__controls button:disabled {
  cursor: default;
  opacity: .28;
}
.process-catalog__viewport {
  overflow: hidden;
  outline: none;
  transition: height .52s cubic-bezier(.16, 1, .3, 1);
}
.process-catalog__viewport:focus-visible {
  box-shadow: inset 0 0 0 2px var(--peanut);
}
.process-catalog__track {
  display: flex;
  width: 100%;
  align-items: flex-start;
  transform: translate3d(0, 0, 0);
  transition: transform .68s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.process-catalog__page {
  flex: 0 0 100%;
  min-width: 0;
  padding: clamp(22px, 3vw, 42px);
}
.process-catalog__page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.process-catalog__cards {
  display: grid;
  grid-template-columns: repeat(var(--process-count), minmax(0, 1fr));
  gap: clamp(24px, 3vw, 50px);
}
.process-card {
  position: relative;
  display: flex;
  min-height: clamp(190px, 17vw, 270px);
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(48px, 4vw, 64px) clamp(18px, 2.3vw, 34px) clamp(22px, 2.8vw, 38px);
  background: color-mix(in srgb, var(--bone-pale) 92%, white);
  border: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.process-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1px - clamp(24px, 3vw, 50px));
  width: calc(1px + clamp(24px, 3vw, 50px));
  height: 10px;
  background: var(--process-route);
  transform: translateY(-50%);
  clip-path: polygon(0 40%, calc(100% - 9px) 40%, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, calc(100% - 9px) 60%, 0 60%);
}
.process-card--payment {
  background: color-mix(in srgb, var(--bone) 68%, var(--peanut));
}
.process-card__number {
  position: absolute;
  top: -1px;
  left: -1px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--bone);
  background: var(--process-route);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.process-card__label {
  position: absolute;
  top: 13px;
  right: 15px;
  color: var(--peanut);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.process-card__copy {
  display: grid;
  gap: 10px;
}
.process-card h4 {
  max-width: 24ch;
  color: var(--asphalt);
  font-size: clamp(.98rem, 1.3vw, 1.25rem);
  line-height: 1.15;
}
.process-card p {
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(.76rem, .9vw, .9rem);
  line-height: 1.42;
}
@media (prefers-reduced-motion: reduce) {
  .process-catalog__viewport,
  .process-catalog__track { transition: none }
}
.process-extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.process-extras > article {
  padding: clamp(24px, 3vw, 48px);
  border-right: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.process-extras > article:last-child { border-right: 0 }
.process-extras h3 { margin-bottom: 12px }
.process-extras p:not(.kicker),
.process-extras ul {
  color: var(--muted);
}
.process-extras ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.15em;
}

.timing-grid .tile {
  position: relative;
  isolation: isolate;
}
.timing-grid .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--peanut);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .48s cubic-bezier(.22,.75,.18,1);
}
.timing-grid .tile:nth-child(2)::before { transform-origin: right }
.timing-grid .tile__body {
  position: relative;
  z-index: 1;
  padding-block: clamp(28px, 3vw, 52px);
  transition: color .24s ease;
}
.timing-grid .kicker {
  margin-bottom: clamp(18px, 2vw, 30px);
  color: var(--asphalt);
  font-size: clamp(1.35rem, 2.2vw, 2.5rem);
  line-height: .95;
  letter-spacing: -.045em;
  transition: color .24s ease, transform .48s cubic-bezier(.22,.75,.18,1);
}
.timing-grid .tile__body p:not(.kicker),
.timing-grid .tile__details {
  transition: color .24s ease;
}
.timing-grid .tile:hover::before { transform: scaleX(1) }
.timing-grid .tile:hover .tile__body { color: var(--bone) }
.timing-grid .tile:hover .kicker {
  color: var(--bone);
  transform: translateX(clamp(6px, .8vw, 14px));
}
.timing-grid .tile:hover .tile__body p:not(.kicker),
.timing-grid .tile:hover .tile__details {
  color: color-mix(in srgb, var(--bone) 84%, transparent);
}

@media (min-width: 641px) {
  .mosaic > .tile--logo:not(:first-child) .tile__body {
    grid-template-rows: minmax(52px, 1fr) auto auto auto;
    gap: 6px;
    padding: 16px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timing-grid .tile::before,
  .timing-grid .tile__body,
  .timing-grid .kicker,
  .timing-grid .tile__body p,
  .timing-grid .tile__details {
    transition: none;
  }
  .timing-grid .tile:hover .kicker { transform: none }
}

.mosaic.editorial-grid {
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  counter-reset: editorial-card;
}
.mosaic.editorial-grid .tile {
  position: relative;
  counter-increment: editorial-card;
  background: transparent;
  border-right: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-radius: 0;
  box-shadow: none;
  transition: color .18s ease, background-color .18s ease;
}
.mosaic.editorial-grid .tile:nth-child(3),
.mosaic.editorial-grid .tile:nth-child(5) {
  background: color-mix(in srgb, var(--bone) 82%, var(--peanut));
}
.mosaic.editorial-grid .tile:first-child {
  color: var(--bone);
  background: var(--bark);
}
.mosaic.editorial-grid .tile::before {
  content: "0" counter(editorial-card);
  position: absolute;
  top: clamp(12px, 1.2vw, 22px);
  left: clamp(14px, 1.4vw, 26px);
  z-index: 1;
  color: color-mix(in srgb, var(--bark) 58%, transparent);
  font-size: clamp(0.58rem, .62vw, .72rem);
  font-weight: 700;
  letter-spacing: .16em;
}
.mosaic.editorial-grid .tile::after {
  content: "↗";
  position: absolute;
  top: clamp(9px, 1vw, 18px);
  right: clamp(14px, 1.4vw, 26px);
  color: color-mix(in srgb, var(--bark) 58%, transparent);
  font-size: clamp(0.85rem, 1vw, 1.2rem);
}
.mosaic.editorial-grid .tile:first-child::before,
.mosaic.editorial-grid .tile:first-child::after {
  color: color-mix(in srgb, var(--bone) 72%, transparent);
}
.mosaic.editorial-grid .tile__body {
  padding: clamp(38px, 3vw, 62px) clamp(16px, 1.8vw, 34px) clamp(18px, 2vw, 38px);
}
.mosaic.editorial-grid .tile h3 {
  max-width: 18ch;
  letter-spacing: -.035em;
  line-height: 1.02;
}
.mosaic.editorial-grid .tile:first-child p {
  color: color-mix(in srgb, var(--bone) 76%, transparent);
}
.mosaic.editorial-grid .tile:hover {
  color: var(--bone);
  background: var(--peanut);
  transform: none;
}
.mosaic.editorial-grid .tile:hover p,
.mosaic.editorial-grid .tile:hover::before,
.mosaic.editorial-grid .tile:hover::after {
  color: color-mix(in srgb, var(--bone) 82%, transparent);
}

.mosaic.editorial-grid .tile__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
}
.mosaic.editorial-grid .tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(.94);
  transform: scale(1.035);
  transition: filter .55s ease, transform .7s cubic-bezier(.2,.75,.18,1);
}
.mosaic.editorial-grid .tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bone-pale);
  opacity: .84;
  transition: opacity .5s ease;
}
.mosaic.editorial-grid .tile__body {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: none;
}
.mosaic.editorial-grid .tile__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bone) 88%, transparent),
    color-mix(in srgb, var(--bone) 50%, transparent) 48%,
    transparent 82%
  );
  opacity: 1;
  transition: opacity .5s ease;
}
.mosaic.editorial-grid .tile__body > * {
  position: relative;
  z-index: 1;
}
.mosaic.editorial-grid .tile::before,
.mosaic.editorial-grid .tile::after,
.mosaic.editorial-grid .tile:first-child::before,
.mosaic.editorial-grid .tile:first-child::after {
  z-index: 3;
  color: color-mix(in srgb, var(--bark) 62%, transparent);
}
.mosaic.editorial-grid .tile:first-child,
.mosaic.editorial-grid .tile:hover {
  color: var(--bark);
  background: transparent;
}
.mosaic.editorial-grid .tile:first-child p,
.mosaic.editorial-grid .tile:hover p {
  color: var(--muted);
}
.mosaic.editorial-grid .tile:hover::before,
.mosaic.editorial-grid .tile:hover::after {
  color: color-mix(in srgb, var(--bark) 72%, transparent);
}
.mosaic.editorial-grid .tile:hover .tile__media::after { opacity: 0 }
.mosaic.editorial-grid .tile:hover .tile__body::before { opacity: .12 }
.mosaic.editorial-grid .tile:hover .tile__media img {
  filter: saturate(1) contrast(1);
  transform: scale(1);
}
.mosaic.editorial-grid .tile:hover .tile__body {
  color: var(--bone);
  text-shadow:
    0 1px 2px color-mix(in srgb, var(--bark) 86%, transparent),
    0 0 14px color-mix(in srgb, var(--bark) 58%, transparent);
}
.mosaic.editorial-grid .tile:hover .tile__body p {
  color: color-mix(in srgb, var(--bone) 92%, white);
}
.mosaic.editorial-grid .tile:hover .tile__body h3 {
  color: var(--on-green);
}
.mosaic.editorial-grid .tile:hover::before,
.mosaic.editorial-grid .tile:hover::after {
  color: color-mix(in srgb, var(--on-green) 84%, transparent);
}

@media (hover: none) {
  .mosaic.editorial-grid .tile__media::after { opacity: .58 }
  .mosaic.editorial-grid .tile__media img { transform: scale(1) }
}

@media (prefers-reduced-motion: reduce) {
  .mosaic.editorial-grid .tile__media::after,
  .mosaic.editorial-grid .tile__media img,
  .mosaic.editorial-grid .tile__body::before {
    transition: none;
  }
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.product {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow);
  border-right: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.product__media {
  aspect-ratio: 1;
  background: var(--peanut);
  overflow: hidden;
}
.product__media img { width: 100%; height: 100%; object-fit: cover }
.product__meta { padding: 16px 18px 18px }
.product__meta p { color: var(--muted); font-size: 0.88rem; margin-top: 4px }

.pdp { padding: 40px 0 10px }
.pdp__grid {
  display: grid;
  grid-template-columns: minmax(240px, min(46vw, 920px)) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.pdp__visual { padding: 0; overflow: hidden; aspect-ratio: 1 }
.pdp__visual img { width: 100%; height: 100%; object-fit: cover }
.spec { display: grid; gap: 10px; margin: 24px 0 0 }
.spec div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line) }
.spec dt { color: var(--muted) }
.spec dd { margin: 0; font-weight: 700 }

.lead {
  background: var(--spruce);
  color: var(--on-green);
  padding: clamp(56px, 6vw, 120px) 0;
}
.lead h1,
.lead h2,
.lead h3,
.lead .kicker {
  color: var(--on-green);
}
.lead .section__lead,
.lead .plain-list,
.lead .plain-list li {
  color: color-mix(in srgb, var(--on-green) 92%, transparent);
}
.lead .form label,
.lead .form .check,
.lead .form .check a {
  color: var(--ink);
}
.lead .form .btn--primary {
  justify-self: end;
  width: auto;
  background: var(--bone-deep);
  color: var(--spruce);
}
.lead__grid {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: clamp(24px, 2.4vw, 40px);
}
.lead__copy {
  flex: 0 1 36rem;
  width: auto;
  max-width: 36rem;
  min-width: 0;
}
.lead__copy .section__lead { max-width: none }
.lead__messengers { margin: 22px 0 0 }
.form {
  flex: 0 0 690px;
  width: 690px;
  max-width: 100%;
  justify-self: end;
  background: var(--white);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-radius: 0;
  padding: 24px;
  display: grid;
  gap: 12px;
}
.form label { display: grid; gap: 6px; font-size: 0.86rem; font-weight: 600 }
.form input:not([type="checkbox"]):not([type="file"]), .form select, .form textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--bark) 22%, transparent);
  border-radius: 0;
  padding: 12px 14px;
  font: inherit;
  background: var(--bone);
  color: var(--ink);
}
.form input:not([type="checkbox"]):not([type="file"]):focus, .form select:focus, .form textarea:focus {
  outline: 0;
  border-color: var(--peanut);
  box-shadow: inset 0 -3px 0 var(--peanut);
}
.form .check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500 }
.form .check input { width: auto; margin-top: 4px }
.file__ctrl {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.file__ctrl input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.file__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  background: var(--bone-deep);
  color: var(--spruce);
  font-weight: 700;
  font-size: 0.95rem;
  pointer-events: none;
}
.file__name {
  min-width: 0;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.file__ctrl:focus-within .file__btn {
  box-shadow: inset 0 -3px 0 var(--peanut);
}

.plain-list { padding-left: 1.15em; display: grid; gap: 8px; color: var(--muted) }
.plain-list li { overflow-wrap: anywhere }
.note {
  margin-bottom: 40px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-left: 5px solid var(--peanut);
}
.note b { display: block; margin-bottom: 6px }

.table-wrap {
  overflow: auto;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-radius: 0;
  box-shadow: none;
}
table { width: 100%; border-collapse: collapse; table-layout: fixed }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top }
th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) }
td { overflow-wrap: anywhere }

.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
}
.faq__item {
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  border-radius: 0;
  padding: 4px 18px;
}
.faq__item summary { cursor: pointer; font-weight: 700; padding: 14px 0 }
.faq__item p { color: var(--muted); padding-bottom: 14px }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center }
.brand-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.brand-row img { width: 100%; border: 1px solid var(--line); border-radius: 0 }

.foot { background: var(--asphalt); color: color-mix(in srgb, var(--on-green) 88%, transparent); padding: clamp(40px, 4vw, 72px) 0 28px }
.foot a { color: inherit; text-decoration: none }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px }
.foot__logo { height: 88px; width: auto; margin-bottom: 14px }
.foot__h { font-weight: 700; margin-bottom: 10px; color: var(--on-green) }
.foot__grid a, .foot__grid p { display: block; margin: 6px 0; font-size: 0.92rem }
.foot__low {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
}

.float {
  position: fixed;
  right: var(--flag-inset);
  bottom: 20px;
  overflow: hidden;
  background-color: rgba(41, 43, 44, .5);
  background-image: linear-gradient(
    118deg,
    rgba(255, 255, 255, .22),
    rgba(210, 218, 224, .1) 34%,
    rgba(255, 255, 255, .17) 56%,
    rgba(192, 199, 204, .08) 76%,
    rgba(255, 255, 255, .12)
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: var(--on-green);
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  border: 0;
  box-shadow: 0 10px 32px rgba(20, 22, 22, .24);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  transition: background-color .28s ease, box-shadow .28s ease, transform .28s ease;
  animation: float-iridescence 7s ease-in-out infinite alternate;
  z-index: 30;
}
.float:hover {
  background-color: rgba(41, 43, 44, .62);
  box-shadow: 0 12px 36px rgba(20, 22, 22, .28);
  transform: translateY(-2px);
}
@keyframes float-iridescence {
  from { background-position: 0% 50% }
  to { background-position: 100% 50% }
}
@media (prefers-reduced-motion: reduce) {
  .float {
    transition: none;
    animation: none;
  }
  .float:hover { transform: none }
}

@media (min-width: 1600px) {
  body { font-size: 18px }
}
@media (min-width: 2200px) {
  body { font-size: 19px }
}

@media (min-width: 821px) and (max-width: 1280px) {
  .mosaic,
  .mosaic--compact {
    aspect-ratio: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(142px, auto));
  }
  .mosaic.mosaic--five,
  .mosaic.mosaic--five.mosaic--compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(160px, 1fr));
  }
  .mosaic.mosaic--five > .tile:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .mosaic.mosaic--five > .tile:nth-child(n + 2) {
    grid-column: span 2;
  }
  .mosaic > .tile--logo:not(:first-child) .tile__body,
  .mosaic > .tile--logo:first-child .tile__body {
    grid-template-rows: minmax(30px, auto) auto auto auto;
    gap: 4px;
    padding: 12px 14px;
  }
  .mosaic .tile__logo {
    width: min(100%, clamp(54px, 10cqi, 112px));
    height: clamp(22px, 3.8cqi, 38px);
  }
  .mosaic .tile__logo--inverse {
    width: clamp(28px, 4cqi, 42px);
    height: clamp(28px, 4cqi, 42px);
    padding: clamp(4px, .6cqi, 8px);
  }
  .mosaic .tile__body h3 {
    font-size: .88rem;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .mosaic .tile__body p { font-size: .72rem; line-height: 1.28 }
  .mosaic .tile__body .kicker { margin-bottom: 2px; font-size: .58rem }
  .mosaic.editorial-grid .tile__body {
    padding: 36px 14px 16px;
  }
  .mosaic.editorial-grid > .tile:not(:first-child) h3 { font-size: .98rem }
  .mosaic.editorial-grid > .tile:not(:first-child) p {
    font-size: .75rem;
    line-height: 1.3;
  }
}

@media (min-width: 1281px) and (max-width: 1500px) {
  .mosaic > .tile--logo:not(:first-child) .tile__body,
  .mosaic > .tile--logo:first-child .tile__body {
    grid-template-rows: minmax(28px, 1fr) auto auto auto;
    gap: 3px;
    padding: 8px 10px;
  }
  .mosaic .tile__logo {
    width: min(100%, clamp(52px, 9cqi, 100px));
    height: clamp(20px, 3.4cqi, 34px);
  }
  .mosaic .tile__logo--inverse {
    width: clamp(26px, 3.8cqi, 40px);
    height: clamp(26px, 3.8cqi, 40px);
    padding: clamp(4px, .6cqi, 7px);
  }
  .mosaic .tile__body h3 { font-size: .84rem }
  .mosaic .tile__body p { font-size: .72rem; line-height: 1.25 }
  .mosaic .tile__body .kicker { margin-bottom: 2px; font-size: .58rem }
}

@media (max-width: 1024px) {
  .foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .hero__grid, .lead__grid, .pdp__grid, .split, .foot__grid { grid-template-columns: 1fr }
  .lead__grid {
    flex-direction: column;
  }
  .lead__copy,
  .form {
    flex: none;
    width: 100%;
    max-width: none;
    justify-self: start;
  }
  .hero--gallery { min-height: calc(100svh - 116px) }
  .hero--gallery::after {
    background:
      linear-gradient(90deg, rgba(10, 12, 11, .8), rgba(10, 12, 11, .58)),
      linear-gradient(0deg, rgba(10, 12, 11, .38), transparent 44%);
  }
  .grid-3, .products, .brand-row { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mosaic > .tile--logo:not(:first-child) .tile__body,
  .mosaic > .tile--logo:first-child .tile__body {
    grid-template-rows: minmax(24px, 1fr) auto auto auto;
    gap: 3px;
    padding: 8px 10px;
  }
  .mosaic .tile__logo {
    width: min(100%, clamp(48px, 9cqi, 92px));
    height: clamp(18px, 3.2cqi, 30px);
  }
  .mosaic .tile__logo--inverse {
    width: clamp(24px, 3.6cqi, 38px);
    height: clamp(24px, 3.6cqi, 38px);
    padding: clamp(4px, .6cqi, 7px);
  }
  .mosaic .tile__body h3 { font-size: .82rem }
  .mosaic .tile__body p { font-size: .72rem; line-height: 1.25 }
  .mosaic .tile__body .kicker { margin-bottom: 2px; font-size: .58rem }
  .top__bar { min-height: 64px }
  .top__mail { display: none }
  :root { --flag-w: 70px }
  .flag { --flag-h: 188px }
}

@media (max-width: 820px) {
  .wrap,
  .note {
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  .hero { padding-top: 56px }
  .process-catalog__toolbar {
    min-height: 70px;
    align-items: flex-end;
    padding: 12px;
  }
  .process-catalog__chapter strong { font-size: .9rem }
  .process-catalog__status { min-width: 42px }
  .process-catalog__controls button { width: 44px; height: 44px }
  .process-catalog__page { padding: 18px 12px }
  .process-catalog__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .process-card {
    min-height: 132px;
    padding: 44px 16px 18px;
  }
  .process-card:not(:last-child)::after { display: none }
  .process-card h4 { max-width: 28ch }
  .process-extras { grid-template-columns: 1fr }
  .process-extras > article {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--bark) 28%, transparent);
  }
  .process-extras > article:last-child { border-bottom: 0 }
  .grid-2, .grid-3, .products, .facts, .brand-row { grid-template-columns: 1fr }
  .hero--gallery::after {
    background: linear-gradient(90deg, rgba(10, 12, 11, .76), rgba(10, 12, 11, .62));
  }
  .grid-3.audience-drops {
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    justify-items: center;
    gap: 14px;
  }
  .mosaic {
    aspect-ratio: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(104px, 29vw, 128px);
    gap: 0;
  }
  .mosaic > .tile:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  .mosaic > .tile:nth-child(2),
  .mosaic > .tile:nth-child(3) {
    grid-column: span 1;
  }
  .mosaic > .tile:nth-child(6) {
    grid-column: span 2;
  }
  .mosaic.mosaic--five > .tile:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  .mosaic.mosaic--five > .tile:nth-child(n + 2) {
    grid-column: span 1;
  }
  .mosaic .tile { border-radius: 0 }
  .mosaic .tile__body { gap: 4px; padding: 10px }
  .mosaic .tile--logo .tile__body { grid-template-rows: minmax(18px, 1fr) auto auto auto }
  .mosaic .tile__logo { width: min(100%, clamp(44px, 16cqi, 72px)); height: clamp(16px, 6cqi, 24px) }
  .mosaic .tile__logo--inverse { width: 24px; height: 24px; padding: 4px; border-radius: 0 }
  .mosaic .tile__body h3 { font-size: 0.76rem; overflow-wrap: anywhere; hyphens: auto }
  .mosaic .tile__body p { font-size: 0.65rem; line-height: 1.3 }
  .mosaic .tile__body .kicker { margin-bottom: 2px; font-size: 0.52rem }
  .mosaic > .tile:not(:first-child) .tile__body > p { display: none }
  .mosaic > .tile:first-child .tile__body { padding: 16px }
  .mosaic > .tile:first-child h3 { font-size: 1.1rem }
  .mosaic > .tile:first-child .tile__body p { font-size: 0.78rem }
  .nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none }
  .nav a { white-space: nowrap }
  .shell-breadcrumbs .wrap {
    margin-right: calc(var(--gutter) + var(--flag-w) + 12px);
  }
  .hero__visual { min-height: 280px }
  .top__cluster .icon-link { display: none }
  :root { --flag-w: 58px }
  .flag { --flag-h: 164px }
  .btn--sm { min-height: 36px; padding: 0 12px; font-size: 0.8rem }
  .foot {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .page-inner .hero__grid:has(.hero__visual) {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 28px;
  }

  .page-inner .hero__grid:has(.hero__visual) h1 {
    font-size: clamp(2.2rem, 4.8vw, 2.8rem);
    line-height: 1;
  }

  .page-inner .hero__grid:has(.hero__visual) .hero__lead {
    font-size: .96rem;
    line-height: 1.45;
  }

  .page-inner .hero__visual {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .page-home .hero--gallery {
    min-height: calc(100svh - 118px);
    padding: 32px 0 24px;
  }

  .page-home .hero--gallery h1 {
    font-size: clamp(2.1rem, 9.5vw, 2.35rem);
  }

  .page-home .hero--gallery .hero__lead {
    margin-top: 12px;
    font-size: .94rem;
    line-height: 1.4;
  }

  .page-home .hero--gallery .hero__actions {
    margin-top: 16px;
    flex-wrap: nowrap;
  }

  .page-home .hero--gallery .hero__actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 12px;
  }

  .page-home .hero--gallery .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 18px;
  }

  .page-home .hero--gallery .facts dt {
    font-size: 1.3rem;
  }

  .page-inner .hero {
    padding-top: 38px;
  }

  body.page-inner main > .hero:not(.hero--gallery) h1 {
    font-size: clamp(2rem, 9vw, 2.35rem);
    line-height: 1;
    hyphens: auto;
    overflow-wrap: normal;
  }

  .page-inner .hero__visual {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .page-inner .hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-inner .hero__actions .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 14px;
    text-align: center;
  }

  .page-inner .lead {
    padding: 48px 0;
  }

  .page-inner .lead__grid {
    gap: 28px;
  }

  .page-inner .form {
    padding: 16px;
  }

  .table-wrap {
    overflow: visible;
    border-inline: 0;
  }

  .table-wrap table,
  .table-wrap tbody {
    display: block;
  }

  .table-wrap thead {
    display: none;
  }

  .table-wrap tr {
    display: grid;
    grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
    border-bottom: 1px solid var(--line);
  }

  .table-wrap td {
    min-width: 0;
    padding: 12px;
    border-bottom: 0;
  }
}

@media (max-width: 480px) {
  .float {
    right: 10px;
    bottom: 10px;
    padding: 10px 14px;
    font-size: .8rem;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .flag { --flag-h: 120px }
  .float {
    padding: 8px 12px;
    font-size: .78rem;
  }
}