/* ---------- method: audit, build, grow as one loop, sailed by your company ---------- */

.method { padding: var(--section-y) 0; background: var(--bg-1); border-top: 1px solid var(--line); }

/* The loop. .method-stage holds the scene (js/sections/method.js): a closed
   course on the water with the hero's ship on it. Wide screens lay the course
   flat above the steps, whose square markers sit on its near leg (--leg-y from
   the top of the loop). Narrow ones stack a compact course, with its own
   stations, above the steps; --stacked tells the script which. */
.method-loop {
  --stacked: 0;
  --leg-y: clamp(208px, 19vw, 262px);
  --inset: clamp(46px, 4.8vw, 68px);
  --gap: clamp(32px, 4vw, 56px);
  --bleed: 28px;
  --wp: 9px;
  --ship: clamp(150px, 15.6vw, 222px);
  position: relative;
  /* the stage keeps its own headroom over the masts and the tag */
  margin-top: clamp(28px, 3vw, 44px);
}
.method-stage {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--bleed));
  right: calc(-1 * var(--bleed));
  height: calc(var(--leg-y) + 34px);
  pointer-events: none;
}
.method-gl { display: block; width: 100%; height: 100%; }

/* the tag that rides with the ship, in the hero's HUD lettering */
.method-tag,
.method-label {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.method-tag {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(233, 234, 234, 0.92);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.method-loop.is-live .method-tag { opacity: 1; }
.method-tag.is-converting::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  background: var(--fg);
  animation: method-blink 0.5s steps(1) infinite;
}
@keyframes method-blink { 50% { opacity: 0; } }
.method-label { display: none; }
.method-fb,
.method-fb-ship { display: none; }

.method-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin: 0;
  padding: var(--leg-y) var(--inset) 0;
  list-style: none;
}
.method-step { position: relative; padding-top: 46px; }

/* stations: the nav's square waypoints, filled once made good */
.method-wp {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--wp);
  height: var(--wp);
  border: 1px solid var(--fg-2);
  background: var(--bg-1);
  transform: translate(-50%, -50%);
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.method-step.is-lit .method-wp { background: var(--fg); border-color: var(--fg); }

.method-step h3 { font-size: clamp(1.5rem, 2.2vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.method-time {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--fg-3);
}
.method-line { margin-top: 16px; color: var(--fg-2); }
.method-out {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  color: var(--fg-2);
  transition: color 0.5s var(--ease-out);
}
.method-out-i { flex: none; width: 15px; height: 15px; margin-top: 0.32em; }
.method-step.is-lit .method-out { color: var(--fg); }

/* ownership: one strip under the loop */
.method-own {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 8px clamp(24px, 4vw, 56px);
  margin-top: clamp(72px, 8vw, 112px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.method-own-title { font-size: 1.25rem; font-weight: 560; letter-spacing: -0.015em; line-height: 1.3; color: var(--fg); }
.method-own-text { color: var(--fg-2); }
.method-own-fees { font-weight: 540; color: var(--fg); }

/* Without WebGL (or without JS): the scene's settled frame as a drawing. The
   course is planned all round and made good from Audit to Grow, the fluyt
   waits at Audit and the carrier has reached Grow (assets/method/). */
.method.no-webgl .method-gl,
html:not(.js) .method-gl,
.method.no-webgl .method-tag,
html:not(.js) .method-tag,
.method.no-webgl .method-label,
html:not(.js) .method-label { display: none; }
.method.no-webgl .method-wp,
html:not(.js) .method-wp { background: var(--fg); border-color: var(--fg); }
.method.no-webgl .method-out,
html:not(.js) .method-out { color: var(--fg); }
.method.no-webgl .method-fb,
html:not(.js) .method-fb {
  display: block;
  position: absolute;
  left: var(--bleed);
  right: var(--bleed);
  bottom: 34px;
  width: calc(100% - 2 * var(--bleed));
  height: 30%;
  overflow: visible;
}
.method-fb-plan { fill: none; stroke: var(--fg); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.42; }
.method-fb-made { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.method.no-webgl .method-fb-ship,
html:not(.js) .method-fb-ship {
  display: block;
  position: absolute;
  bottom: 34px;
  background: no-repeat 0 100% / 100% auto;
}
/* each drawing is placed by its stern and its waterline */
.method.no-webgl .method-fb-ship--fluyt,
html:not(.js) .method-fb-ship--fluyt {
  left: calc(var(--bleed) + var(--inset));
  width: calc(var(--ship) * 1.0276);
  aspect-ratio: 261 / 198;
  background-image: url("../../assets/method/fluyt.svg");
  transform: translate(-4.83%, 8.97%);
}
.method.no-webgl .method-fb-ship--carrier,
html:not(.js) .method-fb-ship--carrier {
  left: calc(var(--bleed) + var(--inset) + (100% - 2 * var(--bleed) - 2 * var(--inset) + var(--gap)) * 2 / 3);
  width: calc(var(--ship) * 1.0709);
  aspect-ratio: 272 / 105;
  background-image: url("../../assets/method/carrier.svg");
  transform: translate(-7.35%, 14.05%);
}

/* narrow screens: a compact course, with its own stations, above the stacked steps */
@media (max-width: 999px) {
  .method-loop { --stacked: 1; --ship: clamp(108px, 32vw, 196px); margin-top: 20px; }
  .method-stage {
    position: relative;
    left: auto;
    right: auto;
    height: clamp(208px, 54vw, 340px);
    margin: 0 calc(-1 * var(--pad));
    background: var(--bg-1);
  }
  .method-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--fg-3);
    transition: color 0.5s var(--ease-out);
  }
  .method-label.is-lit { color: var(--fg); }
  .method-tag { font-size: 11px; letter-spacing: 0.08em; }

  .method-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
    max-width: 36em;
    padding: 32px 0 0;
  }
  .method-step { padding: 0 0 0 26px; }
  .method-step h3 { font-size: 1.5rem; }
  .method-wp { top: 0.825rem; left: 5px; }

  .method.no-webgl .method-fb,
  html:not(.js) .method-fb { left: 6%; right: 6%; bottom: 14%; width: 88%; height: 24%; }
  .method.no-webgl .method-fb-ship,
  html:not(.js) .method-fb-ship { bottom: 14%; }
  .method.no-webgl .method-fb-ship--fluyt,
  html:not(.js) .method-fb-ship--fluyt { left: 9%; width: calc(var(--ship) * 0.74); }
  .method.no-webgl .method-fb-ship--carrier,
  html:not(.js) .method-fb-ship--carrier { left: 52%; bottom: 38%; width: calc(var(--ship) * 0.74); }
}

/* On a tall phone the course stays in view under the nav while the steps pass
   beneath it, so the ship sails as the reader reads. */
@media (max-width: 999px) and (min-height: 620px) {
  .method-loop.is-live .method-stage { position: sticky; top: var(--nav-h); z-index: 2; }
  .method-loop.is-live .method-stage::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(var(--bg-1), rgba(10, 11, 12, 0));
  }
  .method.no-webgl .method-loop .method-stage { position: relative; top: auto; }
  .method.no-webgl .method-loop .method-stage::after { content: none; }
}

/* a phone on its side: the course must fit under the nav */
@media (max-width: 999px) and (max-height: 520px) {
  .method-stage { height: clamp(200px, 60vh, 260px); }
}

@media (max-width: 899px) {
  .method-own { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .method-tag.is-converting::after { animation: none; }
}