/* Authoritative Method stage */
.method {
  position: relative;
  width: 100%;
  padding-right: max(4vw, calc((100vw - 1480px) / 2));
  padding-left: max(4vw, calc((100vw - 1480px) / 2));
  color: #fff;
  background: #181716;
  overflow: hidden;
}
.method::before,
.method::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.method::before {
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(243,161,169,.1) 1.2px, transparent 1.6px),
    repeating-linear-gradient(125deg, transparent 0 24px, rgba(232,175,189,.03) 24px 25px);
  background-size: 22px 22px, auto;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.76) 38%, transparent 86%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.76) 38%, transparent 86%);
}
.method::after {
  left: 50%;
  bottom: -390px;
  width: min(1420px, 128vw);
  height: 820px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.54) 0 4%, rgba(243,161,169,.4) 15%, transparent 36%),
    radial-gradient(ellipse at center, rgba(243,161,169,.4) 0 24%, rgba(232,175,189,.2) 46%, transparent 74%);
  filter: blur(108px);
  opacity: .72;
  transform: translateX(-50%);
}

.method > * { position: relative; z-index: 1; }
.method .section-heading {
  margin-bottom: clamp(60px,8vw,110px);
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(50px,9vw,145px);
}
.method .section-index { color: var(--accent-text); }
.method .section-heading h2 {
  color: #fff;
  font-size: clamp(58px,6.4vw,96px);
}
.method .section-heading h2 em { color: var(--accent-text); }
.method .section-heading > p {
  color: #d4cbc6;
  font-size: 18px;
  line-height: 1.65;
}
.method-grid {
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 14px 14px 0 var(--accent-button);
}
.method-card {
  min-height: 520px;
  color: #fff;
  background: rgba(34,31,30,.92);
  border-right-color: rgba(255,255,255,.28);
}
.method-card:nth-child(even) { background: rgba(43,36,38,.94); }
.method-card:hover {
  color: #181716;
  background: #f2dfdc;
}
.method-card > span {
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 700;
}
.method-card:hover > span { color: var(--accent-button); }
.method-card h3 {
  font-family: var(--impact);
  font-size: clamp(28px,2.5vw,38px);
  letter-spacing: -.055em;
  line-height: .95;
  text-transform: uppercase;
}
.method-card p {
  min-height: 104px;
  color: #d4cbc6;
  font-size: 14px;
  line-height: 1.55;
}
.method-card:hover p { color: #3f3935; }
.method-card small { color: var(--accent-text); font-weight: 700; letter-spacing: .08em; }
.method-card:hover small { color: var(--accent-button); }
.method-quote {
  max-width: 1180px;
  margin: clamp(90px,10vw,150px) auto 0;
  color: #fff;
  font-size: clamp(48px,6vw,90px);
  line-height: .96;
}
.method-quote::before {
  display: block;
  width: 70px;
  height: 7px;
  margin: 0 auto 34px;
  content: "";
  background: var(--accent-text);
}
.method-quote span { color: var(--pink); }

/* Shared motion stage */
.method-glyph,
.method-card:nth-child(n) .method-glyph {
  position: relative;
  isolation: isolate;
  width: 118px;
  overflow: hidden;
  color: #181716;
  background: var(--accent-text);
  border: 0;
  border-radius: 0;
  box-shadow: 7px 7px 0 var(--accent-button);
  font-size: 0;
  transform: none;
}
.method-card:hover .method-glyph,
.method-card:nth-child(n):hover .method-glyph {
  border: 0;
  transform: translate(-3px,-3px);
}
.method-glyph i,
.method-glyph b {
  position: absolute;
  display: block;
  box-sizing: border-box;
  font: inherit;
}

/* Variation 1 - bold action marks */
.method-card:nth-child(1) .method-glyph::before {
  position: absolute;
  inset: -18px;
  content: "";
  background: conic-gradient(#181716 0 15%, transparent 15% 100%);
  border-radius: 50%;
  animation: bold-scan 2.8s linear infinite;
}
.method-card:nth-child(1) .method-glyph i:first-child {
  inset: 21px;
  background: var(--accent-text);
  border: 5px solid #181716;
  border-radius: 50%;
}
.method-card:nth-child(1) .method-glyph b {
  top: 50%; left: 50%; width: 22px; aspect-ratio: 1;
  background: #181716; border-radius: 50%;
  transform: translate(-50%,-50%);
  animation: bold-lock 1.7s ease-in-out infinite;
}
.method-card:nth-child(1) .method-glyph i:last-child {
  top: 50%; left: 13px; right: 13px; height: 4px;
  background: #181716; transform: translateY(-50%);
}

.method-card:nth-child(2) .method-glyph i {
  top: 23px; width: 43px; height: 72px; background: #181716;
  animation: bold-reframe 2.8s cubic-bezier(.7,0,.3,1) infinite;
}
.method-card:nth-child(2) .method-glyph i:first-child { left: 14px; }
.method-card:nth-child(2) .method-glyph i:last-child { right: 14px; animation-direction: reverse; }
.method-card:nth-child(2) .method-glyph b {
  z-index: 2; top: 49px; left: 49px; width: 20px; aspect-ratio: 1;
  background: #f2dfdc; transform: rotate(45deg);
}

.method-card:nth-child(3) .method-glyph b {
  top: 48px; left: 18px; width: 67px; height: 22px;
  background: #181716;
  animation: bold-forward 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
.method-card:nth-child(3) .method-glyph b::after {
  position: absolute; top: -14px; right: -25px; content: "";
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 28px solid #181716;
}
.method-card:nth-child(3) .method-glyph i:first-child {
  top: 28px; bottom: 28px; left: 19px; width: 5px; background: var(--accent-button);
}
.method-card:nth-child(3) .method-glyph i:last-child {
  right: 12px; bottom: 13px; color: #181716;
  font-family: var(--mono); font-size: 8px;
}

.method-card:nth-child(4) .method-glyph i,
.method-card:nth-child(4) .method-glyph b {
  left: 18px; right: 18px; height: 18px;
  background: #181716;
  transform-origin: center bottom;
  animation: bold-build 2.5s cubic-bezier(.16,1,.3,1) infinite;
}
.method-card:nth-child(4) .method-glyph i:first-child { bottom: 17px; }
.method-card:nth-child(4) .method-glyph b { bottom: 42px; animation-delay: .18s; }
.method-card:nth-child(4) .method-glyph i:last-child { bottom: 67px; animation-delay: .36s; }

@keyframes bold-scan { to { transform: rotate(360deg); } }
@keyframes bold-lock { 0%,100% { transform: translate(-50%,-50%) scale(.72); } 48%,62% { transform: translate(-50%,-50%) scale(1.18); } }
@keyframes bold-reframe { 0%,20% { transform: translateY(0) rotate(0); } 50%,70% { transform: translateY(0) rotate(90deg); } 100% { transform: translateY(0) rotate(180deg); } }
@keyframes bold-forward { 0% { transform: translateX(-24px); opacity: 0; } 25% { opacity: 1; } 72% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(24px); opacity: 0; } }
@keyframes bold-build { 0%,18% { transform: scaleX(.2); opacity: .4; } 55%,82% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.2); opacity: .4; } }

@media (max-width: 800px) {
  .method { padding-right: 16px; padding-left: 16px; }
  .method .section-heading { grid-template-columns: 1fr; gap: 30px; }
  .method .section-heading h2 { font-size: 53px; }
  .method .section-heading > p { font-size: 16px; }
  .method-grid { box-shadow: 8px 8px 0 var(--accent-button); }
  .method-card, .method-card:nth-child(n) { min-height: 430px; background: rgba(34,31,30,.95); border-bottom-color: rgba(255,255,255,.28); }
  .method-card:hover { color: #181716; background: #f2dfdc; }
  .method-glyph, .method-card:nth-child(n) .method-glyph { width: 104px; margin: 34px auto; }
  .method-card h3 { font-size: 34px; }
  .method-card p { min-height: 0; color: #d4cbc6; }
  .method-card:hover p { color: #3f3935; }
  .method-quote { font-size: 45px; }

  .method-lab[open] { inset: auto 8px 78px auto; padding: 5px; }
  .method-lab > span { display: none; }
  .method-options button { min-height: 32px; padding: 0 10px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .method-glyph *, .method-glyph::before { animation-play-state: paused !important; }
}