/* visit-steps — section CSS, written by its BUILD-SECTION subagent (2026-09-15).
   Source: brief/visit-steps.md §2/§5/§6 + cache/visit-steps.{desktop,mobile}.json.
   Bands: 0–767 mobile (anchor 390) · 768–1023 row split, mobile structure per half (page D-6) · 1024+ desktop (--vw-base 1619).
   Every rule is scoped under .visit-steps (GLOBAL-SCOPE LOCK). */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.visit-steps {
  --font-serif:     'Roboto Serif', Georgia, 'Times New Roman', serif;
  --font-mono:      'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --c-accent:       #e63329;
  --c-eyebrow:      #b3aeae;
  --c-border:       #d6e2e7;
  --radius-md-m:    16px;
  --radius-btn-d:   8.119px;
  --radius-card-d:  24px;
  --shadow-media-m: 0 16px 48px rgba(0,0,0,.11);
  --text-h2:        clamp(18px, calc(22px + (var(--max-vw) - 390px) * 0.015), 43px);
  --lh-h2:          1.2;
  --ls-h2:          -0.025em;
  --text-eyebrow:   clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-eyebrow:     1.5;
  --ls-eyebrow:     0.2em;
  --ls-lead:        0;
  --text-subnote:   clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 20px);
  --lh-subnote:     1.5;
  --ls-subnote:     0;
  --section-pad-y:  clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 63px);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .visit-steps {
    --text-h2:       clamp(22px, calc(22px + (var(--max-vw) - 768px) * 0.025), 46.425px);
    --text-eyebrow:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 21.493px);
    --text-subnote:  clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 13.639px);
    --section-pad-y: clamp(32px, calc(32px + (var(--max-vw) - 768px) * 0.025), 75px);
  }
}

@media (min-width: 1024px) {
  .visit-steps {
    --text-h2:       clamp(29px, calc(46.425px * (var(--max-vw) / var(--vw-base))), 55px);
    --lh-h2:         1.16;
    --ls-h2:         -0.012em;
    --text-eyebrow:  clamp(14px, calc(21.493px * (var(--max-vw) / var(--vw-base))), 25px);
    --lh-eyebrow:    normal;
    --ls-eyebrow:    0.1em;
    --ls-lead:       0;
    --text-subnote:  clamp(9px, calc(13.639px * (var(--max-vw) / var(--vw-base))), 16px);
    --lh-subnote:    normal;
    --ls-subnote:    -0.03em;
    --section-pad-y: clamp(47px, calc(75px * (var(--max-vw) / var(--vw-base))), 89px);
  }
}

/* ---------- section-local tokens — mobile band ---------- */
.visit-steps {
  --vs-title-size:   clamp(12px, calc(15px + (var(--max-vw) - 390px) * 0.015), 30px);
  --vs-desc-size:    clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --vs-num-font:     clamp(7px, calc(9px + (var(--max-vw) - 390px) * 0.015), 18px);
  --vs-num-size:     clamp(23px, calc(27.992px + (var(--max-vw) - 390px) * 0.015), 55px);
  --vs-num-top:      clamp(1px, calc(1.05px + (var(--max-vw) - 390px) * 0.015), 2px);
  --vs-text-x:       clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 79px);
  --vs-desc-gap:     clamp(5px, calc(6px + (var(--max-vw) - 390px) * 0.015), 12px);
  --vs-step-gap:     clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --vs-line-left:    clamp(16px, calc(19px + (var(--max-vw) - 390px) * 0.015), 37px);
  --vs-line-top:     clamp(40px, calc(49.05px + (var(--max-vw) - 390px) * 0.015), 96px);
  --vs-line-bottom:  clamp(16px, calc(19.95px + (var(--max-vw) - 390px) * 0.015), 39px);
  --vs-timeline-pt:  clamp(23px, calc(28px + (var(--max-vw) - 390px) * 0.015), 55px);
  --vs-eyebrow-gap:  clamp(20px, calc(24px + (var(--max-vw) - 390px) * 0.015), 47px);
  --vs-title-gap:    clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --vs-lead-gap:     clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --vs-subnote-pt:   clamp(23px, calc(28px + (var(--max-vw) - 390px) * 0.015), 55px);
  --vs-cta-gap:      clamp(11px, calc(13.05px + (var(--max-vw) - 390px) * 0.015), 26px);
  --vs-btn-h:        clamp(38px, calc(45.99px + (var(--max-vw) - 390px) * 0.015), 90px);
  --vs-col-gap:      0px;

  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

/* ---------- layout ---------- */
.visit-steps__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ---------- intro: overline, heading, lead ---------- */
.visit-steps__eyebrow {
  width: fit-content;
  margin-top: var(--vs-eyebrow-gap);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-eyebrow);
}
.visit-steps__title {
  width: fit-content;
  margin-top: var(--vs-title-gap);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--c-ink);
}
.visit-steps__lead {
  align-self: stretch;
  margin-top: var(--vs-lead-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-text);
}

/* ---------- media card (D-VS-1: first on mobile, last on desktop) ---------- */
.visit-steps__media {
  order: -1;
  align-self: stretch;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: var(--radius-md-m);
  box-shadow: var(--shadow-media-m);
}
.visit-steps__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------- steps timeline ---------- */
.visit-steps__timeline {
  position: relative;
  padding-top: var(--vs-timeline-pt);
  padding-left: var(--vs-text-x);
}
.visit-steps__line {
  position: absolute;
  left: var(--vs-line-left);
  top: var(--vs-line-top);
  bottom: var(--vs-line-bottom);
  width: 1px;
  background: var(--c-accent);
  opacity: 0.4;
}
.visit-steps__step {
  position: relative;
}
.visit-steps__step + .visit-steps__step {
  padding-top: var(--vs-step-gap);
}
.visit-steps__num {
  position: absolute;
  left: calc(-1 * var(--vs-text-x));
  top: var(--vs-num-top);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--vs-num-size);
  height: var(--vs-num-size);
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-page);
}
.visit-steps__step + .visit-steps__step .visit-steps__num {
  top: calc(var(--vs-step-gap) + var(--vs-num-top));
}
.visit-steps__num-text {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--vs-num-font);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--c-accent);
}
.visit-steps__step-title {
  width: fit-content;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--vs-title-size);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--c-ink);
}
.visit-steps__step-desc {
  margin-top: var(--vs-desc-gap);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--vs-desc-size);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--c-text);
}

/* ---------- sub-note (mobile structure only, D-VS-4) ---------- */
.visit-steps__subnote {
  width: fit-content;
  margin-inline: auto;
  margin-top: var(--vs-subnote-pt);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-subnote);
  line-height: var(--lh-subnote);
  letter-spacing: var(--ls-subnote);
  text-align: center;
  color: var(--c-text);
}

/* ---------- CTA — shared .btn, box re-declared in section scope (D-VS-5) ---------- */
.visit-steps .visit-steps__cta {
  --btn-w: 100%;
  --btn-h: var(--vs-btn-h);
  display: flex;
  position: relative;
  z-index: 1;
  margin-top: var(--vs-cta-gap);
}

/* ================= 768–1023: row split, each half keeps the mobile structure ================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .visit-steps {
    --vs-title-size:   clamp(15px, calc(15px + (var(--max-vw) - 768px) * 0.025), 27.082px);
    --vs-desc-size:    clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 21.304px);
    --vs-num-font:     clamp(9px, calc(9px + (var(--max-vw) - 768px) * 0.025), 31.53px);
    --vs-num-size:     clamp(27.992px, calc(27.992px + (var(--max-vw) - 768px) * 0.025), 59.474px);
    --vs-num-top:      1.05px;
    --vs-text-x:       clamp(40px, calc(40px + (var(--max-vw) - 768px) * 0.025), 85.25px);
    --vs-desc-gap:     6px;
    --vs-step-gap:     clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 39.19px);
    --vs-line-left:    clamp(19px, calc(19px + (var(--max-vw) - 768px) * 0.025), 30.72px);
    --vs-line-top:     clamp(49.05px, calc(49.05px + (var(--max-vw) - 768px) * 0.025), 96px);
    --vs-line-bottom:  19.95px;
    --vs-timeline-pt:  28px;
    --vs-eyebrow-gap:  clamp(24px, calc(24px + (var(--max-vw) - 768px) * 0.025), 47px);
    --vs-title-gap:    clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 10.69px);
    --vs-lead-gap:     clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 28.61px);
    --vs-subnote-pt:   clamp(28px, calc(28px + (var(--max-vw) - 768px) * 0.025), 55px);
    --vs-cta-gap:      clamp(13.05px, calc(13.05px + (var(--max-vw) - 768px) * 0.025), 32.02px);
    --vs-btn-h:        clamp(45.99px, calc(45.99px + (var(--max-vw) - 768px) * 0.025), 57.343px);
    --vs-col-gap:      clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 111px);
  }
  .visit-steps__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--vs-col-gap);
    align-items: start;
  }
}

/* ================= 1024+: the drawn desktop layout ================= */
@media (min-width: 1024px) {
  .visit-steps {
    --vs-title-size:   clamp(17px, calc(27.082px * (var(--max-vw) / var(--vw-base))), 32px);
    --vs-desc-size:    clamp(13px, calc(21.304px * (var(--max-vw) / var(--vw-base))), 25px);
    --vs-num-font:     clamp(20px, calc(31.53px * (var(--max-vw) / var(--vw-base))), 37px);
    --vs-num-size:     clamp(38px, calc(59.474px * (var(--max-vw) / var(--vw-base))), 71px);
    --vs-num-top:      0px;
    --vs-timeline-pt:  0px;
    --vs-text-x:       clamp(54px, calc(85.25px * (var(--max-vw) / var(--vw-base))), 101px);
    --vs-title-pt:     clamp(6px, calc(8.92px * (var(--max-vw) / var(--vw-base))), 11px);
    --vs-desc-gap:     clamp(3px, calc(5.265px * (var(--max-vw) / var(--vw-base))), 6px);
    --vs-step-gap:     clamp(25px, calc(39.19px * (var(--max-vw) / var(--vw-base))), 46px);
    --vs-desc-max-a:   clamp(263px, calc(415.325px * (var(--max-vw) / var(--vw-base))), 493px);
    --vs-desc-max-b:   clamp(303px, calc(479.754px * (var(--max-vw) / var(--vw-base))), 569px);
    --vs-line-left:    clamp(19px, calc(30.72px * (var(--max-vw) / var(--vw-base))), 36px);
    --vs-line-top:     clamp(18px, calc(28.75px * (var(--max-vw) / var(--vw-base))), 34px);
    --vs-title-gap:    clamp(7px, calc(10.69px * (var(--max-vw) / var(--vw-base))), 13px);
    --vs-lead-gap:     clamp(18px, calc(28.61px * (var(--max-vw) / var(--vw-base))), 34px);
    --vs-media-gap:    clamp(20px, calc(31px * (var(--max-vw) / var(--vw-base))), 37px);
    --vs-intro-inset:  clamp(3px, calc(5px * (var(--max-vw) / var(--vw-base))), 6px);
    --vs-col-gap:      clamp(70px, calc(111px * (var(--max-vw) / var(--vw-base))), 132px);
    --vs-flow-offset:  clamp(27px, calc(43.11px * (var(--max-vw) / var(--vw-base))), 51px);
    --vs-cta-gap:      clamp(20px, calc(32.02px * (var(--max-vw) / var(--vw-base))), 38px);
    --vs-btn-w:        clamp(242px, calc(383.295px * (var(--max-vw) / var(--vw-base))), 455px);
    --vs-btn-h:        clamp(36px, calc(57.343px * (var(--max-vw) / var(--vw-base))), 68px);
    /* line runs past step 4 and ends at the CTA's vertical centre (D-VS-2) */
    --vs-line-bottom:  calc(-1 * (var(--vs-cta-gap) + var(--vs-btn-h) / 2));
  }

  .visit-steps__inner {
    display: grid;
    grid-template-columns: minmax(0, 544fr) minmax(0, 565fr);
    column-gap: var(--vs-col-gap);
    align-items: start;
  }

  /* intro column: text inset 5 from the photo's left edge (D-VS-9) */
  .visit-steps__eyebrow {
    margin-top: 0;
    margin-left: var(--vs-intro-inset);
  }
  .visit-steps__title { margin-left: var(--vs-intro-inset); }
  .visit-steps__lead {
    /* box = the column width, shifted right by the inset — overhangs the photo by 5 as drawn */
    margin-left: var(--vs-intro-inset);
    margin-right: calc(-1 * var(--vs-intro-inset));
  }
  .visit-steps__media {
    order: 0;
    margin-top: var(--vs-media-gap);
    aspect-ratio: 544 / 373;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-card-d);
    box-shadow: 26px 33px 137.8px 0 rgba(0, 0, 0, 0.13);
  }

  /* flow column: top-offset, not centred (D-VS-11) */
  .visit-steps__flow { margin-top: var(--vs-flow-offset); }
  .visit-steps__timeline {
    padding-top: 0;
    padding-left: 0;
  }
  /* a 2px STROKE (Figma LINE 3271:217) — painted as a border, box 2px wide */
  .visit-steps__line {
    width: 0;
    border-left: 2px solid var(--c-accent);
    background: none;
    opacity: 1;
  }
  /* step group = hug box, no padding (D-VS-10): text column offset + title offset are margins
     on the text; flow-root stops the title's margin collapsing through the li */
  .visit-steps__step {
    display: flow-root;
    width: fit-content;
  }
  .visit-steps__step + .visit-steps__step {
    padding-top: 0;
    margin-top: var(--vs-step-gap);
  }
  .visit-steps__step-title {
    margin-top: var(--vs-title-pt);
    margin-left: var(--vs-text-x);
  }
  .visit-steps__step-desc { margin-left: var(--vs-text-x); }
  .visit-steps__num,
  .visit-steps__step + .visit-steps__step .visit-steps__num {
    left: 0;
    top: 0;
    border: 0;
    outline: 2px solid var(--c-accent);   /* OUTSIDE stroke — box stays the node's 59.474 */
    outline-offset: 0;
  }
  .visit-steps__num-text {
    line-height: normal;
    letter-spacing: -0.06em;
  }
  .visit-steps__step-title {
    line-height: 1.16;
    letter-spacing: -0.012em;
  }
  .visit-steps__step-desc {
    line-height: normal;
    letter-spacing: -0.03em;
  }
  .visit-steps__step:nth-child(-n+2) .visit-steps__step-desc { max-width: var(--vs-desc-max-a); }
  .visit-steps__step:nth-child(n+3) .visit-steps__step-desc { max-width: var(--vs-desc-max-b); }

  .visit-steps__subnote { display: none; }

  .visit-steps .visit-steps__cta {
    --btn-w: var(--vs-btn-w);
    --btn-h: var(--vs-btn-h);
    --btn-r: var(--radius-btn-d);
  }
}