.calone-method-section {
  --calone-method-progress: 1;
  --calone-method-gutter: clamp(20px, 5vw, 76px);
  --calone-method-rule: var(--calone-on-light-border);
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(112px, 15vw, 220px) var(--calone-method-gutter) clamp(72px, 10vw, 148px);
  color: var(--calone-black);
  background: var(--calone-paper);
}

.calone-method-transition {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(80px, 12vw, 180px);
  pointer-events: none;
  background: linear-gradient(to bottom, var(--calone-white), var(--calone-paper));
}

.calone-method-layout {
  width: min(100%, 1680px);
  margin-inline: auto;
}

.calone-method-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 5vw, 56px);
  padding-top: clamp(52px, 8vw, 108px);
}

.calone-method-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
}

.calone-method-intro h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(56px, 10.5vw, 168px);
  font-weight: 500;
  line-height: .82;
  letter-spacing: -.065em;
}

.calone-method-intro h2 .font-display {
  display: block;
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
}

.calone-method-copy {
  max-width: 43ch;
  margin: 0;
  color: var(--calone-on-light-muted);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
}

.calone-method-progress {
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: var(--calone-method-rule);
}

.calone-method-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--calone-method-progress));
  transform-origin: left;
  background: var(--calone-black);
}

.calone-method-disciplines {
  margin-top: clamp(96px, 16vw, 240px);
  border-top: 1px solid var(--calone-method-rule);
}

.calone-method-discipline {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: clamp(30px, 5vw, 66px) 0;
  border-bottom: 1px solid var(--calone-method-rule);
}

.calone-method-discipline__number {
  padding-top: .35em;
  color: var(--calone-gray-500);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}

.calone-method-discipline h3 {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 68px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.05em;
}

.calone-method-discipline p {
  grid-column: 2;
  max-width: 42ch;
  margin: 14px 0 0;
  color: var(--calone-on-light-muted);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
}

.calone-method-closing {
  width: min(100%, 1680px);
  margin: clamp(96px, 15vw, 220px) auto 0;
  font-family: var(--calone-font-display);
  font-size: clamp(30px, 4.2vw, 68px);
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.calone-method-section.is-motion-ready .calone-method-intro h2 {
  opacity: calc(.18 + (var(--calone-method-progress) * .82));
  transform: translate3d(0, calc((1 - var(--calone-method-progress)) * var(--motion-distance)), 0);
}

.calone-method-section.is-motion-ready .calone-method-copy {
  opacity: calc(.25 + (var(--calone-method-progress) * .75));
  transform: translate3d(0, calc((1 - var(--calone-method-progress)) * var(--motion-distance)), 0);
}

.calone-method-section.is-motion-ready .calone-method-discipline {
  opacity: .12;
  transform: translate3d(0, var(--motion-distance), 0);
  transition: opacity var(--motion-reveal) var(--ease-calone),
    transform var(--motion-reveal) var(--ease-calone);
}

.calone-method-section.is-motion-ready .calone-method-discipline.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (min-width: 900px) {
  /* Pista de rolagem para o .calone-method-intro grudado, logo abaixo. Só
     vale aqui: sem sticky, este mínimo virava espaço branco no fim da seção,
     e no Safari do iPhone `vh` mede a tela com as barras recolhidas, então o
     vão era ainda maior que na janela do desktop. O `svh` é a mesma medida
     onde houver suporte, e a altura real da tela onde as barras aparecem. */
  .calone-method-section {
    min-height: 170vh;
    min-height: 170svh;
  }

  .calone-method-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr);
    gap: clamp(64px, 9vw, 160px);
    align-items: start;
  }

  .calone-method-intro {
    position: sticky;
    top: clamp(96px, 13vh, 150px);
    min-height: min(74vh, 760px);
  }

  .calone-method-disciplines {
    margin-top: clamp(240px, 42vh, 460px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calone-method-section {
    --calone-method-progress: 1 !important;
  }

  .calone-method-section .calone-method-intro h2,
  .calone-method-section .calone-method-copy,
  .calone-method-section .calone-method-discipline {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}