/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * macrostructure: editorial canvas · tone: direct, Brazilian, assured · anchor hue: wine
 * fingerprint: staggered monumental headline + scroll-scrubbed brand portal + split proof/manifesto close
 * contrast: pass (40-41) · nav: source-faithful · slop: pass (42-57) · mobile: pass (34, 49, 50-57)
 */
@import url("tokens.css");

@font-face {
  font-family: "Korb";
  src: url("fonte/Korb.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Korb";
  src: url("fonte/Korb Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("assets/work-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("assets/work-sans-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  min-width: 20rem;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

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

button {
  color: inherit;
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-wine);
  outline-offset: 4px;
}

.page-shell {
  padding: var(--space-xs);
  min-height: 100svh;
}

.hero {
  position: relative;
  min-height: 112rem;
  overflow: clip;
  background: var(--color-paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), calc(100% - 3.5rem) 100%, 0 100%);
}

.sequence-layer {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.sequence-layer__sticky {
  position: sticky;
  inset-block-start: var(--space-xs);
  width: 100%;
  height: calc(100svh - var(--space-md));
  overflow: clip;
  background: var(--color-paper);
}

.sequence-canvas,
.sequence-layer__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sequence-canvas {
  display: block;
  opacity: 0.88;
}

.sequence-layer__wash {
  background: linear-gradient(
    to bottom,
    var(--color-paper-soft) 0%,
    var(--color-paper-clear) 34%,
    var(--color-paper-clear) 67%,
    var(--color-paper-soft) 100%
  );
 }

.site-header {
  position: absolute;
  z-index: 20;
  inset-block-start: 0;
  inset-inline: 0;
  padding-block: var(--space-md);
  background: var(--color-overlay);
}

.site-header.is-fixed {
  position: fixed;
  z-index: 50;
  inset-block-start: 0;
  inset-inline: var(--space-xs);
  background: var(--color-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: none;
}

.nav {
  width: min(100% - 2rem, 76rem);
  height: 2.875rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  width: 6.5rem;
  height: 2.5rem;
  flex: none;
}

.brand__symbol,
.brand__wordmark {
  display: block;
  flex: none;
}

.brand__symbol {
  width: 2.855rem;
  height: 2.5rem;
}

.brand__wordmark {
  width: 3.43rem;
  height: 2.108rem;
  margin-inline-start: 0.205rem;
}

.nav__links {
  display: none;
}

.project-cta {
  position: relative;
  isolation: isolate;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.875rem;
  padding-inline: var(--space-lg);
  overflow: hidden;
  background: var(--color-gold);
  font-size: var(--text-body);
  white-space: nowrap;
  transition: color 480ms var(--ease-out);
}

.project-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #A3183F;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 480ms var(--ease-out);
}

.project-cta img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  transition: filter 480ms var(--ease-out);
}

.menu-toggle {
  width: 2.875rem;
  height: 2.875rem;
  display: grid;
  place-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
}

.menu-toggle span {
  width: 1.2rem;
  height: 0.125rem;
  background: var(--color-ink);
  transition: transform var(--dur-medium) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(0.265rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-0.265rem) rotate(-45deg);
}

.nav__links.is-open {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  inset-block-start: 4.875rem;
  inset-inline: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-paper);
  box-shadow: 0 1rem 2.5rem var(--color-shadow);
}

.nav__links a {
  font-size: var(--text-body);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links .mobile-project-cta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding-inline: var(--space-md);
  background: var(--color-gold);
  color: var(--color-accent-ink);
}

.mobile-project-cta img {
  width: 1.125rem;
  height: 1.125rem;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 2rem, 76.375rem);
  min-height: 112rem;
  margin-inline: auto;
  padding-block-start: 10.5rem;
}

.headline {
  position: relative;
  z-index: 2;
  margin: 0;
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.headline span {
  display: block;
}

.headline__motion {
  will-change: transform;
}

.brand-tagline {
  position: absolute;
  inset-block-start: 4.75rem;
  inset-inline-start: 0;
  width: 6.125rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

.headline__transforms {
  margin-block-start: 0.18em;
}

.headline__brands {
  margin-block-start: 0.18em;
  color: var(--color-wine);
}

.support-copy {
  width: min(100%, 17.25rem);
  margin: calc(var(--space-xl) + 0.75rem) 0 0;
  font-size: var(--text-body);
  line-height: 1.58;
}

.hero-benefits {
  width: min(100%, 20.3125rem);
  margin-block-start: var(--space-lg);
  font-size: var(--text-body);
  line-height: 1.58;
}

.hero-benefits ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-benefits li {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: rgb(250 236 3 / 25%);
}

.hero-benefits li::before {
  content: "•";
  margin-inline-end: 0.5rem;
}

.support-cta {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--space-xs);
  margin-block-start: calc(var(--space-xl) + 0.5rem);
  color: var(--color-ink);
  font-size: var(--text-body);
  line-height: 1.58;
  white-space: nowrap;
}

.support-cta::after {
  content: "";
  grid-column: 1 / -1;
  width: 3.125rem;
  height: 0.1875rem;
  margin-block-start: var(--space-md);
  background: var(--color-gold);
  transform-origin: left center;
  transition: width var(--dur-fast) var(--ease-out);
}

.support-cta:focus-visible::after {
  width: 100%;
}

.support-cta img {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.support-cta:active {
  transform: translateY(1px);
}

.support-cta[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.ornament-wrap {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform;
}

.ornament {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: transform, opacity;
}

.ornament-wrap--left {
  width: 7.5rem;
  height: 7.5rem;
  inset-block-start: 49rem;
  inset-inline-start: calc(39% + 1.5rem);
}

.ornament-wrap--right {
  width: 9.45rem;
  height: 9.45rem;
  inset-block-start: 58rem;
  inset-inline-end: -0.5875rem;
}

.ornament-wrap--small-left {
  width: 3.7rem;
  height: 3.7rem;
  inset-block-start: 55rem;
  inset-inline-start: -1.45rem;
}

.ornament-wrap--small-right {
  display: none;
}

.ornament--left,
.ornament--small-right {
  transform: rotate(180deg);
}

.statement {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 23rem;
  width: min(100%, 19.938rem);
}

.statement h2 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-statement);
  font-style: normal;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.statement__line {
  display: block;
  color: var(--color-ink);
}

.statement__line--accent {
  color: var(--color-wine);
}

.statement p {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.58;
}

.clients-section {
  padding-block: 3rem;
  background: var(--color-canvas);
  overflow: hidden;
}

.clients-marquee {
  display: grid;
  gap: 2.1875rem;
  width: min(calc(100% - 3rem), 76rem);
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.clients-row,
.clients-scroll-shift {
  overflow: visible;
}

.clients-track,
.clients-group {
  display: flex;
  align-items: center;
  width: max-content;
}

.clients-track,
.clients-scroll-shift {
  will-change: transform;
}

.clients-group {
  gap: clamp(2.25rem, 4.5vw, 4.75rem);
  padding-inline-end: clamp(2.25rem, 4.5vw, 4.75rem);
}

.clients-group img {
  display: block;
  flex: none;
  width: 8.875rem;
  height: 2rem;
  object-fit: contain;
  object-position: left center;
  opacity: 0.8;
  filter: grayscale(1);
}

.anchor-target {
  position: absolute;
  inset-block-start: 45%;
}

.anchor-target--contact {
  inset-block-start: 85%;
}

@media (min-width: 40rem) {
  .page-shell {
    padding: var(--space-xs);
  }

  .hero {
    min-height: 108rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), calc(100% - 5rem) 100%, 0 100%);
  }

  .hero__inner {
    width: min(100% - 4rem, 76.375rem);
    min-height: 108rem;
    padding-block-start: 11rem;
  }

  .headline {
    font-size: clamp(5.5rem, 11.5vw, 7rem);
  }

  .headline__transforms {
    text-align: center;
  }

  .headline__brands {
    text-align: end;
  }

  .support-copy {
    width: 45%;
    margin-block-start: calc(var(--space-2xl) + 1rem);
  }

  .hero-benefits {
    position: absolute;
    inset-block-start: 32rem;
    inset-inline-end: 0;
    width: 45%;
    margin: 0;
  }

  .ornament-wrap--left {
    width: 9.8rem;
    height: 9.8rem;
    inset-block-start: 44rem;
    inset-inline-start: calc(9% + 2.1rem);
  }

  .ornament-wrap--right {
    width: 11.6rem;
    height: 11.6rem;
    inset-block-start: 49.5rem;
    inset-inline-end: calc(4% + 4.35rem);
  }

  .ornament-wrap--small-left {
    width: 3.95rem;
    height: 3.95rem;
    inset-block-start: 57rem;
    inset-inline-start: -0.35rem;
  }

  .ornament-wrap--small-right {
    display: block;
    width: 3.95rem;
    height: 3.95rem;
    inset-block-start: 34.5rem;
    inset-inline-end: -0.35rem;
  }


  .statement {
    inset-block-end: 8rem;
  }


}

@media (min-width: 60rem) {
  .hero {
    min-height: 105.3125rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5.75rem), calc(100% - 5.75rem) 100%, 0 100%);
  }

  .site-header {
    position: absolute;
    inset-block-start: 0;
    padding-block: var(--space-xs);
  }

  .nav {
    width: min(100% - 4rem, 76rem);
  }

  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
  }

  .project-cta {
    display: flex;
  }

  .nav__links .mobile-project-cta {
    display: none;
  }

  .menu-toggle {
    display: none;
  }

  .hero__inner {
    min-height: 105.3125rem;
    width: min(100% - 4rem, 76.375rem);
    margin-block-start: 0;
    padding-block-start: 13.3rem;
  }

  .headline {
    height: 23.7rem;
    font-size: clamp(7rem, 9.1vw, 8.18rem);
    line-height: 1;
  }

  .headline > span {
    position: absolute;
  }

  .headline__communication {
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .headline__transforms {
    inset-block-start: 8rem;
    inset-inline: 0;
    margin: 0;
    text-align: center;
  }

  .headline__brands {
    inset-block-start: 16.3rem;
    inset-inline-end: 0;
    margin: 0;
    text-align: end;
  }

  .support-copy {
    position: absolute;
    inset-block-start: 29.4375rem;
    inset-inline-start: 0.4rem;
    width: 17.3125rem;
    margin: 0;
  }

  .hero-benefits {
    position: absolute;
    inset-block-start: 12.55rem;
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: 20.375rem;
    margin: 0;
  }

  .hero-benefits ul {
    align-items: flex-end;
  }

  .hero-benefits li {
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .brand-tagline {
    inset-block-start: 5.25rem;
    inset-inline-start: 0.4rem;
  }

  .support-cta {
    position: absolute;
    inset-block-start: 38.9375rem;
    inset-inline-start: 0.4rem;
    inset-inline-end: auto;
    margin: 0;
  }

  .ornament-wrap--left {
    width: 11.5rem;
    height: 11.5rem;
    inset-block-start: 48.75rem;
    inset-inline-start: 10.75rem;
  }

  .ornament-wrap--right {
    width: 12.3125rem;
    height: 12.3125rem;
    inset-block-start: 58.6875rem;
    inset-inline-end: 9.4375rem;
  }

  .ornament-wrap--small-left {
    width: 5.8125rem;
    height: 5.8125rem;
    inset-block-start: 61.5rem;
    inset-inline-start: 0.9375rem;
  }

  .ornament-wrap--small-right {
    width: 5.8125rem;
    height: 5.8125rem;
    inset-block-start: 43.1875rem;
    inset-inline-end: 0.5rem;
  }


  .statement {
    inset-inline-start: 0.4rem;
    inset-inline-end: 0;
    inset-block-start: 77.1875rem;
    inset-block-end: auto;
    width: auto;
  }

  .statement h2 {
    width: 19.9375rem;
  }

  .statement__body {
    position: absolute;
    inset-block-start: 10.625rem;
    inset-inline-start: 54.625rem;
    width: 19.9375rem;
  }

  .clients-section {
    padding-block: 4rem;
  }
}

@media (min-width: 90rem) {
  .hero__inner {
    width: 76.375rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav__links a,
  .brand {
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .nav__links a:hover,
  .brand:hover {
    opacity: 0.62;
  }

  .project-cta:hover {
    color: white;
    box-shadow: none;
  }

  .project-cta:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }

  .project-cta:hover img {
    filter: brightness(0) invert(1);
  }

  .support-cta:hover::after {
    width: 100%;
  }

  .menu-toggle:hover {
    transform: scale(1.04);
  }
}

.mobile-project-cta:active,
.menu-toggle:active {
  transform: translateY(1px);
}

.project-cta[aria-disabled="true"],
.mobile-project-cta[aria-disabled="true"],
.menu-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (pointer: coarse) {
  .nav__links a,
  .project-cta,
  .menu-toggle {
    min-height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Extended home sections */
.hero-manifesto {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4.5rem;
  margin: 0;
  padding: 1rem;
  background: var(--color-canvas);
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
}

.hero-manifesto strong {
  color: var(--color-wine);
}

.content-shell {
  width: min(calc(100% - 3rem), 76rem);
  margin-inline: auto;
}

.solutions-section {
  position: relative;
  z-index: 2;
  padding-block: 5rem;
  background: var(--color-canvas);
}

.section-heading {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-block-end: 2.5rem;
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading h2 {
  max-width: 37.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.section-heading p {
  max-width: 24rem;
  font-size: var(--text-body);
  line-height: 1.58;
}

.section-heading--light {
  color: white;
}

.section-heading--light p {
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);
  line-height: 1.5;
}

.solutions-list {
  display: grid;
  gap: 1rem;
}

.solution-row {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1rem;
  min-height: 7.5rem;
  padding: 1.5rem;
  overflow: clip;
  background: white;
  transition: color 420ms var(--ease-out), translate 420ms var(--ease-out);
}

.solution-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #A3183F;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out);
}

.solution-row__number {
  color: #e3ad00;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
}

.solution-row h3,
.solution-row p,
.solution-row strong {
  margin: 0;
}

.solution-row h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.0625em;
  text-transform: uppercase;
}

.solution-row p {
  color: var(--color-muted);
  font-size: var(--text-body);
  line-height: 1.58;
  transition: color 420ms var(--ease-out);
}

.solution-row strong {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: 12rem;
  font-size: var(--text-body);
  line-height: 1.58;
}

.solution-row strong span {
  display: inline-block;
  font-size: 1.1rem;
  transition: transform 420ms var(--ease-out);
}

.method-section {
  --method-fill: 0;
  position: relative;
  z-index: 4;
  isolation: isolate;
  margin-block-start: -8rem;
  overflow: clip;
  padding-block: 5rem;
  background: linear-gradient(
    to bottom,
    transparent 0 8rem,
    var(--color-wine) 8rem 100%
  );
  color: white;
}

.method-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--color-wine);
  opacity: var(--method-fill);
  pointer-events: none;
}

.method-inner {
  position: relative;
  z-index: 1;
  min-height: 46.8125rem;
}

.method-stage {
  position: relative;
  margin-block-start: 5rem;
}

.method-track {
  display: grid;
  gap: 2rem;
}

.method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 17.625rem;
  padding: 2rem;
  background: url("assets/method-step-outline.svg") center / 100% 100% no-repeat;
}

.method-card span {
  color: #faec03;
  font-size: var(--text-body);
  line-height: 1.58;
}

.method-card h3,
.method-card p {
  margin: 0;
}

.method-card h3 {
  color: #faec03;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: -0.0625em;
  text-transform: uppercase;
}

.method-card p {
  font-size: var(--text-body);
  line-height: 1.58;
}

.method-note {
  margin: 2rem 0 0;
  padding: 2rem;
  border-radius: 0.25rem;
  background: #8f1b3b;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.method-note--right {
  color: #faec03;
}

.tiles-transition {
  position: relative;
  z-index: 3;
  height: clamp(20rem, 40.28vw, 36.25rem);
  overflow: clip;
  background: var(--color-canvas);
}

.tiles-grid {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}

.transition-tile {
  flex: 1 1 0;
  height: var(--tile-height);
  background: var(--color-wine);
  transform: scaleY(0);
  opacity: 1;
  transform-origin: bottom center;
  will-change: transform;
}

.portfolio {
  position: relative;
  background: var(--color-ink);
}

.portfolio-case {
  position: relative;
  overflow: clip;
  transform-origin: top center;
  will-change: transform, clip-path, border-radius;
  padding: 4.5rem 1.5rem;
  color: #f7f5ef;
}

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

.portfolio-case--wine {
  background: var(--color-wine);
}

.portfolio-case__inner {
  position: relative;
  width: min(100%, 75.8125rem);
  margin-inline: auto;
  transform-origin: top center;
  will-change: transform;
}

.portfolio-eyebrow,
.portfolio-number,
.portfolio-copy,
.portfolio-case h2 {
  position: relative;
  z-index: 3;
  margin: 0;
}

.portfolio-eyebrow,
.portfolio-number {
  color: #d7b56d;
  font-size: var(--text-body);
  line-height: 1.58;
  text-transform: uppercase;
}

.portfolio-number {
  margin-block-start: 0.25rem;
}

.portfolio-case h2 {
  margin-block-start: 2rem;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -0.0375em;
  text-transform: uppercase;
}

.portfolio-copy {
  max-width: 18rem;
  margin-block-start: 1.5rem;
  font-size: 1rem;
  line-height: 1.58;
  opacity: 0.76;
}

.portfolio-piece {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 0.375rem;
  will-change: transform, opacity, clip-path;
}

.portfolio-piece img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-piece--main {
  width: 100%;
  aspect-ratio: 1.485;
  margin-block-start: 3rem;
}

.portfolio-piece--side-left,
.portfolio-piece--side-right {
  display: inline-block;
  width: calc(50% - 0.75rem);
  aspect-ratio: 0.768;
  margin-block-start: 1.5rem;
}

.portfolio-piece--side-right {
  margin-inline-start: 1rem;
}

.portfolio-piece--badge {
  width: 6rem;
  height: 6rem;
  margin: 1.5rem auto 0;
  border-radius: 0;
}

.portfolio-piece--badge img {
  object-fit: contain;
}

.portfolio-side__base,
.portfolio-side__overlay {
  position: absolute;
  max-width: none;
}

.portfolio-piece .portfolio-side__overlay {
  height: 183.4%;
  width: 424.63%;
  object-fit: fill;
}

.portfolio-piece .portfolio-side__overlay--left {
  inset-block-start: -83.32%;
  inset-inline-start: -0.08%;
}

.portfolio-piece .portfolio-side__overlay--right {
  inset-block-start: -36.77%;
  inset-inline-start: -250.82%;
}

.portfolio-piece--shape-top,
.portfolio-piece--shape-bottom {
  position: absolute;
  z-index: 1;
  width: 8rem;
  height: 8rem;
  border-radius: 0;
}

.portfolio-piece--shape-top {
  inset-block-start: 12rem;
  inset-inline-end: -3rem;
}

.portfolio-piece--shape-bottom {
  inset-block-end: 10rem;
  inset-inline-start: -3rem;
}

.site-footer {
  position: relative;
  z-index: 10;
  min-height: 53.5625rem;
  overflow: clip;
  padding-block-start: 5rem;
  background: white;
  color: var(--color-ink);
}

.footer-stage {
  position: relative;
  min-height: 48.5625rem;
}

.footer-copy {
  position: relative;
  z-index: 3;
  width: min(100%, 19.625rem);
}

.footer-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.107;
  letter-spacing: -0.0535em;
  text-transform: uppercase;
}

.footer-copy h2 span {
  color: #A3183F;
}

.footer-copy > p {
  margin: 2rem 0 0;
  font-size: var(--text-body);
  line-height: 1.58;
}

.footer-cta {
  position: static;
  inset: auto;
  margin-block-start: 2rem;
}

.footer-portrait {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 32rem;
  margin-block-start: 3rem;
  overflow: hidden;
}

.footer-portrait img {
  position: absolute;
  top: -3.49%;
  left: -39.52%;
  width: 173.76%;
  height: 174.04%;
  max-width: none;
  object-fit: cover;
}

.footer-meta {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-block-start: 2rem;
  font-family: "Alexandria", var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
}

.footer-contact,
.footer-legal {
  display: grid;
  gap: 0.5rem;
}

.footer-contact a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact > a img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  margin-block-start: 1rem;
}

.social-icon {
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
}

.social-icon img {
  position: absolute;
  max-width: none;
}

.social-icon[aria-label="Instagram"] img:nth-child(1),
.social-icon[aria-label="Facebook"] img:nth-child(1),
.social-icon[aria-label="X"] img,
.social-icon[aria-label="LinkedIn"] img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.social-icon[aria-label="Instagram"] img:nth-child(2) {
  inset: 24.32%;
  width: 51.36%;
  height: 51.36%;
}

.social-icon[aria-label="Instagram"] img:nth-child(3) {
  top: 17.3%;
  left: 70.7%;
  width: 12%;
  height: 12%;
}

.social-icon[aria-label="Facebook"] img:nth-child(2) {
  top: 18.51%;
  left: 27.61%;
  width: 45.59%;
  height: 81.49%;
}

.social-icon[aria-label="YouTube"] img:nth-child(1) {
  top: 14.77%;
  left: 0.1%;
  width: 99.8%;
  height: 70.46%;
}

.social-icon[aria-label="YouTube"] img:nth-child(2) {
  top: 35.13%;
  left: 39.87%;
  width: 26.14%;
  height: 29.74%;
}

.social-icon[aria-label="Behance"] img:nth-child(1) {
  top: 4%;
  left: 19.67%;
  width: 74.72%;
  height: 96%;
}

.social-icon[aria-label="Behance"] img:nth-child(2) {
  top: 4%;
  left: 11.04%;
  width: 78.55%;
  height: 92%;
}

.social-icon[aria-label="Behance"] img:nth-child(3) {
  top: 0;
  left: 6.25%;
  width: 83.34%;
  height: 90.86%;
}

.footer-legal {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}

.footer-legal p {
  margin: 0;
}

.footer-logo {
  display: flex;
  align-items: end;
  gap: 0.2rem;
  width: 6.5rem;
  height: 2.5rem;
}

.footer-logo img:first-child { width: 45.7%; height: 100%; }
.footer-logo img:last-child { width: 52.8%; height: 84%; }

.footer-wordmark {
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  inset-block-end: 0;
  display: block;
  width: calc(100% + 0.75rem);
  height: auto;
  max-width: none;
  transform: translateX(-50%);
}

@media (min-width: 48rem) {
  .section-heading {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    justify-content: space-between;
  }

  .solution-row {
    grid-template-columns: 4rem minmax(12rem, 20.625rem) minmax(16rem, 1fr) minmax(7rem, 8rem);
    align-items: center;
    gap: 2rem;
    min-height: 7.5rem;
    padding: 2rem 4rem 2rem 2rem;
  }

  .solution-row strong {
    max-width: none;
  }

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

  .portfolio-number {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    margin: 0;
  }
}

@media (min-width: 60rem) {
  .statement {
    inset-inline-start: 0.1875rem;
    inset-block-start: 73.0625rem;
  }

  .statement__body {
    inset-block-start: 7.875rem;
    inset-inline-start: 54.25rem;
    width: 21.75rem;
  }

  .hero-manifesto {
    inset-inline: 0.1875rem;
    inset-block-start: 96.8125rem;
    inset-block-end: auto;
    height: 4rem;
    padding: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
    white-space: nowrap;
  }

  .solutions-section {
    padding-block: 5rem;
  }

  .method-section {
    margin-block-start: -25rem;
    padding-block: 4rem;
    background: linear-gradient(
      to bottom,
      transparent 0 25rem,
      var(--color-wine) 25rem 100%
    );
  }

  .method-stage {
    height: 34.8125rem;
  }

  .method-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 17.5rem);
    gap: 2rem;
    height: 34.8125rem;
  }

  .method-card {
    width: 17.5rem;
    height: 17.625rem;
  }

  .method-card:nth-child(2) { margin-block-start: 5.8125rem; }
  .method-card:nth-child(3) { margin-block-start: 11.5rem; }
  .method-card:nth-child(4) { margin-block-start: 16.9375rem; }

  .method-note {
    position: absolute;
    width: 12.75rem;
    margin: 0;
  }

  .method-note--left {
    inset-inline-start: 0;
    inset-block-start: 19.625rem;
  }

  .method-note--right {
    inset-inline-end: 0;
    inset-block-start: 2.9375rem;
    width: 13.3125rem;
  }

  .portfolio-case {
    display: grid;
    place-items: center;
    height: 100svh;
    padding: 0;
  }

  .portfolio-case__inner {
    width: 75.8125rem;
    height: 44.8125rem;
    transform: scale(var(--portfolio-scale, 1));
    transform-origin: center;
  }

  .portfolio-eyebrow {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-start: 0.4375rem;
  }

  .portfolio-number {
    inset-block-start: 0;
  }

  .portfolio-case h2 {
    position: absolute;
    inset-block-start: 4.75rem;
    inset-inline-start: 0;
    width: 42.5rem;
    margin: 0;
    font-size: 5rem;
  }

  .portfolio-copy {
    position: absolute;
    inset-block-start: 11.625rem;
    inset-inline-start: 0.4375rem;
    width: 12.8125rem;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.59;
  }

  .portfolio-piece {
    position: absolute;
    margin: 0;
  }

  .portfolio-piece--main {
    inset-block-start: 11.625rem;
    inset-inline-start: 18.1875rem;
    width: 40.1875rem;
    height: 27.0625rem;
  }

  .portfolio-piece--side-left {
    inset-block-start: 26.75rem;
    inset-inline-start: 0.4375rem;
    width: 13.875rem;
    height: 18.0625rem;
  }

  .portfolio-piece--side-right {
    inset-block-start: 4.75rem;
    inset-inline-end: 0;
    width: 13.875rem;
    height: 18.0625rem;
  }

  .portfolio-piece--badge {
    inset-block-start: 28.375rem;
    inset-inline-end: 2.875rem;
    width: 8rem;
    height: 8.0625rem;
  }

  .portfolio-piece--shape-top {
    inset-block-start: 7.25rem;
    inset-inline-start: 52.8125rem;
    width: 11.0625rem;
    height: 11.0625rem;
  }

  .portfolio-piece--shape-bottom {
    inset-block-start: 31.75rem;
    inset-inline-start: 10.6875rem;
    width: 11.0625rem;
    height: 11.0625rem;
  }

  .portfolio-case {
    position: sticky;
    top: 0;
  }

  .portfolio-case:nth-child(1) { z-index: 1; }
  .portfolio-case:nth-child(2) { z-index: 2; }
  .portfolio-case:nth-child(3) { z-index: 3; }

  .footer-stage {
    height: 48.5625rem;
    min-height: 0;
  }

  .footer-copy {
    position: absolute;
    inset-block-start: 1.375rem;
    inset-inline-start: 2rem;
  }

  .footer-portrait {
    position: absolute;
    inset-block-start: -1.21875rem;
    inset-inline-start: 21.5rem;
    width: 39.0625rem;
    height: 52rem;
    margin: 0;
  }

  .footer-meta {
    position: absolute;
    inset-block-start: 1.375rem;
    inset-inline-end: 2rem;
    justify-content: flex-end;
    width: 17.4375rem;
    height: 27.5625rem;
    margin: 0;
  }

  .footer-contact { margin-block-end: auto; }

}

@media (hover: hover) and (pointer: fine) {
  .solution-row:hover,
  .solution-row:focus-visible {
    color: white;
    translate: 0.5rem 0;
  }

  .solution-row:hover::before,
  .solution-row:focus-visible::before {
    transform: scaleX(1);
  }

  .solution-row:hover p,
  .solution-row:focus-visible p {
    color: rgb(255 255 255 / 72%);
  }

  .solution-row:hover strong span,
  .solution-row:focus-visible strong span {
    transform: translate(0.25rem, 0.25rem);
  }
}