/* =====================================================================
   Service · Prequalification and vendor lists. Page-scoped clone layout.
   Every length is `calc(N * var(--u))`, where N is the px value at 1440
   and --u reproduces the source's viewport-driven root scale:
     >=1024  root = 100vw/90   ->  1px@1440 = 100vw/1440
     640-1023 root = 100vw/48  ->  1px@1440 = 100vw/768
     <640    root = 100vw/25.75 -> 1px@1440 = 100vw/412
   ===================================================================== */

main.p-vendor-lists{
  --u: calc(100vw / 412);
  --gap: calc(10 * var(--u));
  --pad: clamp(1rem, 3vw, 2.5rem);
  --cols: 6;
  display: block;
  position: relative;
  overflow-x: clip;
  color: var(--teal);
}
@media (min-width:640px){
  main.p-vendor-lists{ --u: calc(100vw / 768); --gap: calc(12.5 * var(--u)); }
}
@media (min-width:1024px){
  main.p-vendor-lists{ --u: calc(100vw / 1440); --gap: calc(15 * var(--u)); --cols: 12; }
}

main.p-vendor-lists section:where(:not(.cta-band)):where(:not(.cta-hands)){ padding: 0 var(--pad); }

/* ---- grid utility (source .my-grid) --------------------------------- */
main.p-vendor-lists .vl-grid{
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  column-gap: var(--gap);
}

/* ---- type scale ------------------------------------------------------ */
main.p-vendor-lists .page-title{
  font-family: var(--sans); font-weight:500; letter-spacing:0;
  font-size: calc(52 * var(--u)); line-height: calc(52 * var(--u));
}
main.p-vendor-lists .my-title{
  font-family: var(--sans); font-weight:500; letter-spacing:0;
  font-size: calc(80 * var(--u)); line-height: calc(75 * var(--u));
}
main.p-vendor-lists .fs-300{
  font-family: var(--sans); font-weight:400; letter-spacing:0;
  font-size: calc(160 * var(--u)); line-height: calc(160 * var(--u));
}
main.p-vendor-lists .fs-46{
  font-family: var(--sans); font-weight:400; letter-spacing:0;
  font-size: calc(46 * var(--u)); line-height: calc(46 * var(--u));
}
main.p-vendor-lists .fs-36{
  font-family: var(--sans); font-weight:400; letter-spacing:0;
  font-size: calc(36 * var(--u)); line-height: calc(36 * var(--u));
}
main.p-vendor-lists .page-text{
  font-family: var(--sans); font-weight:400; letter-spacing:0;
  font-size: calc(22 * var(--u)); line-height: calc(22 * var(--u));
}
main.p-vendor-lists .mono{
  font-family: var(--mono); font-weight:400; letter-spacing:0;
  font-size: calc(12 * var(--u)); line-height: calc(15.96 * var(--u));
  text-transform: uppercase;
}
@media (min-width:1024px){
  main.p-vendor-lists .page-title{ font-size: calc(160 * var(--u)); line-height: calc(150 * var(--u)); }
  main.p-vendor-lists .my-title { font-size: calc(160 * var(--u)); line-height: calc(150 * var(--u)); }
  main.p-vendor-lists .fs-300   { font-size: calc(300 * var(--u)); line-height: calc(300 * var(--u)); }
  main.p-vendor-lists .page-text{ font-size: calc(30 * var(--u));  line-height: calc(30 * var(--u)); }
}

main.p-vendor-lists .vl-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* SplitText holders start hidden so the mask reveal has something to do */
body.gsap main.p-vendor-lists .sp{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  body.gsap main.p-vendor-lists .sp{ opacity:1 !important; }
}

/* ---- eyebrow rails (house .eyebrow, source metrics) ------------------ */
main.p-vendor-lists .vl-rail{ position: relative; height: 0; }
main.p-vendor-lists .vl-rail .eyebrow{
  position: absolute; top: 0; left: 0; right: 0;
  margin: 0;
  padding-top: calc(20 * var(--u));
  border-top: 1px solid var(--teal);
  align-items: flex-start;
}
main.p-vendor-lists .eyebrow .mono{ color: var(--teal); }

/* =====================================================================
   1 · HERO
   ===================================================================== */
main.p-vendor-lists .vl-hero{ padding-top: calc(180 * var(--u)); }
@media (min-width:1024px){
  main.p-vendor-lists .vl-hero{ padding-top: calc(312 * var(--u)); }
}
main.p-vendor-lists .vl-head-a{ color: var(--teal); text-align: left; }

main.p-vendor-lists .vl-stack{
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  margin: calc(32 * var(--u)) calc(-1 * var(--pad)) 0;
}
main.p-vendor-lists .vl-hero-img{
  grid-area: stack;
  overflow: hidden;
  aspect-ratio: 412 / 825;
  background: var(--teal-deep);
}
main.p-vendor-lists .vl-hero-img canvas{
  display: block; width: 100%; height: 100%;
  object-fit: cover; image-rendering: pixelated;
}

main.p-vendor-lists .vl-hero-over{
  grid-area: stack; z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  column-gap: var(--gap);
  align-content: start;
  margin-top: calc(20 * var(--u));
  padding: 0 var(--pad) calc(60 * var(--u));
}
main.p-vendor-lists .vl-head-b{ grid-column: 1 / -1; color: var(--ink); }
main.p-vendor-lists .vl-hero-p{
  grid-column: 1 / -1;
  margin-top: calc(40 * var(--u));
  color: var(--paper);
  /* Keep the service explanation legible across light areas of the photo. */
  background: var(--teal-deep);
  padding: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width:1024px){
  main.p-vendor-lists .vl-hero-img{ aspect-ratio: auto; }
  main.p-vendor-lists .vl-hero-over{ padding-bottom: calc(400 * var(--u)); }
  main.p-vendor-lists .vl-head-b{ grid-column: span 9; }
  main.p-vendor-lists .vl-hero-p{ grid-column: 8 / -2; margin-top: calc(200 * var(--u)); }
}

/* stair wipes: bottom-anchored, grow left to right on scrub */
main.p-vendor-lists .vl-stairs{
  position: absolute; left: 0; right: 0; bottom: -1px;
  padding: 0 var(--pad);
  display: grid;
  grid-template-rows: repeat(3, calc(130 * var(--u)));
  pointer-events: none;
  --span9: 100%;
}
main.p-vendor-lists .vl-stairs i{
  display: block; height: 100%;
  margin-left: calc(-1 * var(--pad));
  background: var(--paper);
  width: calc(var(--frac) * var(--span9) + 2 * var(--pad));
  transform: scaleX(0);
  transform-origin: left center;
}
@media (min-width:1024px){
  main.p-vendor-lists .vl-stairs{
    grid-template-rows: repeat(3, calc(139.98 * var(--u)));
    --span9: calc(0.75 * (100% + 15 * var(--u)) - 15 * var(--u));
  }
  /* The bar already begins at the viewport edge, because margin-left pulls it out of
     the start gutter. Adding two gutters to its width counted that bleed twice and put
     every step one whole gutter past the 9-column edge the headline sits on: 15px when
     the family gutter was 15px, 40px now that it is the page gutter. Below 1024 the two
     gutters stay right, because there --span9 is the content width and the widest step
     is meant to reach both edges of the viewport. */
  main.p-vendor-lists .vl-stairs i{ width: calc(var(--frac) * var(--span9) + var(--pad)); }
}

/* =====================================================================
   2 · APPROACH
   ===================================================================== */
main.p-vendor-lists .vl-approach{ padding-top: calc(24 * var(--u)); }
main.p-vendor-lists .vl-appr-grid{
  align-items: flex-start;
  margin-top: calc(50 * var(--u));
}
main.p-vendor-lists .vl-appr-h{
  grid-column: 1 / -1;
  font-weight: 400;
}
main.p-vendor-lists .vl-appr-body{
  grid-column: 1 / -1;
  margin-top: calc(28 * var(--u));
}
main.p-vendor-lists .vl-appr-item{
  border-top: 1px solid var(--teal);
  padding: calc(16 * var(--u)) 0 calc(22 * var(--u));
}
main.p-vendor-lists .vl-appr-item .mono{ color: var(--teal); display: block; }
main.p-vendor-lists .vl-appr-item p{
  margin-top: calc(10 * var(--u));
  color: var(--teal);
  font-family: var(--sans); font-weight: 400;
  font-size: calc(17 * var(--u)); line-height: 1.4;
}
main.p-vendor-lists .vl-appr-mono{
  margin: calc(24 * var(--u)) 0 calc(40 * var(--u));
}
main.p-vendor-lists .vl-appr-mono p{ color: var(--teal); }

main.p-vendor-lists .vl-carousel{
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  height: calc(300 * var(--u));
  border-left: 1px solid var(--teal);
}
main.p-vendor-lists .vl-track{
  position: absolute; top: 0; left: 0; width: 100%;
  display: flex; flex-direction: column;
  will-change: transform;
  animation: vlScrollUp 40s linear infinite;
}
main.p-vendor-lists .vl-logo{
  display: flex; align-items: center; justify-content: center;
  padding: calc(46 * var(--u)) 0;
}
main.p-vendor-lists .vl-logo span{
  display: block; width: calc(230 * var(--u));
  font-family: var(--sans); font-weight: 700; letter-spacing: -.01em;
  color: var(--teal); text-align: center; line-height: 1.05;
}
main.p-vendor-lists .vl-logo-1 span{ font-size: calc(40 * var(--u)); }
main.p-vendor-lists .vl-logo-2 span{ font-size: calc(30 * var(--u)); }
main.p-vendor-lists .vl-logo-3 span{ font-size: calc(24 * var(--u)); }

@keyframes vlScrollUp{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-50%) } }
@media (prefers-reduced-motion:reduce){
  main.p-vendor-lists .vl-track{ animation: none; }
}

@media (min-width:1024px){
  main.p-vendor-lists .vl-appr-grid{
    grid-template-rows: minmax(calc(271.98 * var(--u)), auto) minmax(calc(269.88 * var(--u)), auto);
    margin-top: 0;   /* section height = pt-24 + 541.86, per TOPOLOGY */
  }
  main.p-vendor-lists .vl-appr-h{
    grid-column: 3 / span 4; grid-row: 1;
    margin-top: calc(164 * var(--u));
  }
  main.p-vendor-lists .vl-appr-body{
    grid-column: 3 / span 6; grid-row: 2;
    margin: calc(20 * var(--u)) 0 calc(120 * var(--u));
  }
  main.p-vendor-lists .vl-appr-mono{
    width: calc(560 * var(--u));
    margin: calc(30 * var(--u)) 0 0;
  }
  main.p-vendor-lists .vl-carousel{
    grid-column: -4 / span 3; grid-row: span 2;
    height: auto; align-self: stretch;
  }
  main.p-vendor-lists .vl-logo{ padding: calc(70 * var(--u)) 0; }
}

/* =====================================================================
   3 · NUMBERS
   ===================================================================== */
main.p-vendor-lists .vl-numbers{ padding-bottom: calc(50 * var(--u)); }
main.p-vendor-lists .vl-num-block{
  grid-column: 1 / -1;
  margin-top: calc(100 * var(--u));
}
main.p-vendor-lists .vl-num{
  position: relative; z-index: 1;
  color: var(--teal);
}
main.p-vendor-lists .vl-num-mask{ display: none; }
main.p-vendor-lists .vl-num-cap{ margin-top: calc(20 * var(--u)); }
main.p-vendor-lists .vl-num-cap p{ color: var(--teal); }

@media (min-width:1024px){
  main.p-vendor-lists .vl-numbers{ padding-bottom: 0; }
  main.p-vendor-lists .vl-num-grid{ grid-template-rows: calc(582.86 * var(--u)); }
  main.p-vendor-lists .vl-num-block{
    grid-column: 4 / -1;
    margin-top: 0;
    padding: calc(135 * var(--u)) 0 calc(96 * var(--u)) calc(118.94 * var(--u));
    border-left: 1px solid var(--teal);
  }
  main.p-vendor-lists .vl-num-mask{
    display: block; position: absolute; z-index: -1;
    top: 0; left: calc(-144 * var(--u));
    width: calc(144 * var(--u)); height: 100%;
    background: var(--paper);
  }
  main.p-vendor-lists .vl-num-cap{ width: calc(339.97 * var(--u)); }
}

/* =====================================================================
   4 · WHERE YOU REGISTER
   ===================================================================== */
main.p-vendor-lists .vl-lists{ padding-bottom: var(--pad); }
main.p-vendor-lists .vl-rule{
  border-top: 1px solid var(--teal);
  padding-top: calc(100 * var(--u));
}
main.p-vendor-lists .vl-title{
  grid-column: 1 / -1;
  text-align: left;
  font-weight: 500;
}
@media (min-width:1024px){
  main.p-vendor-lists .vl-title-row{ grid-template-rows: calc(300 * var(--u)); }
  main.p-vendor-lists .vl-title{ grid-column: 3 / -3; }
}

/* one row per registration type */
main.p-vendor-lists .vl-rows{
  margin-top: calc(90 * var(--u));
}
main.p-vendor-lists .vl-row{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  column-gap: var(--gap);
  border-top: 1px solid var(--teal);
  padding: calc(22 * var(--u)) 0 calc(34 * var(--u));
}
main.p-vendor-lists .vl-row:last-child{ border-bottom: 1px solid var(--teal); }
main.p-vendor-lists .vl-row > *{ grid-column: 1 / -1; }
main.p-vendor-lists .vl-row-meta{
  display: flex; justify-content: space-between;
  padding-right: calc(12 * var(--u));
}
main.p-vendor-lists .vl-row-meta .mono{ color: var(--teal); }
main.p-vendor-lists .vl-row-name{ margin-top: calc(22 * var(--u)); }
main.p-vendor-lists .vl-row-name h3{ color: var(--teal); font-weight: 400; }
main.p-vendor-lists .vl-row-need{ margin-top: calc(22 * var(--u)); }
main.p-vendor-lists .vl-row-need p{
  color: var(--teal);
  font-family: var(--sans); font-weight: 400;
  font-size: calc(17 * var(--u)); line-height: 1.4;
}
main.p-vendor-lists .vl-row-cycle{ margin-top: calc(18 * var(--u)); }
main.p-vendor-lists .vl-row-cycle p{ color: var(--teal); }

/* tender data block */
main.p-vendor-lists .vl-data{
  margin-top: calc(80 * var(--u));
  row-gap: calc(36 * var(--u));
}
main.p-vendor-lists .vl-data-shot{
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  aspect-ratio: 385 / 260;
  background: var(--teal-deep);
}
main.p-vendor-lists .vl-data-shot canvas{
  display: block; width: 100%; height: 100%;
  object-fit: cover; image-rendering: pixelated;
}
main.p-vendor-lists .vl-data-figs{ grid-column: 1 / -1; }
main.p-vendor-lists .vl-fig{
  border-top: 1px solid var(--teal);
  padding: calc(16 * var(--u)) 0 calc(22 * var(--u));
}
main.p-vendor-lists .vl-fig-n{
  display: block;
  font-family: var(--sans); font-weight: 400; letter-spacing: 0;
  font-size: calc(46 * var(--u)); line-height: 1.05;
  color: var(--teal);
}
main.p-vendor-lists .vl-fig p{ margin-top: calc(10 * var(--u)); color: var(--teal); }
main.p-vendor-lists .vl-data-note{
  border-top: 1px solid var(--teal);
  padding-top: calc(16 * var(--u));
  color: var(--teal);
}

/* CTA button block */
main.p-vendor-lists .vl-btn-row{ margin-top: calc(60 * var(--u)); }
main.p-vendor-lists .vl-btn-wrap{
  grid-column: 1 / -1;
  position: relative; z-index: 1;
}
main.p-vendor-lists .vl-btn-mask{ display: none; }

@media (min-width:1024px){
  main.p-vendor-lists .vl-row{
    padding: calc(30 * var(--u)) 0 calc(44 * var(--u));
  }
  main.p-vendor-lists .vl-row-meta{
    grid-column: 1 / span 1;
    display: block;
  }
  main.p-vendor-lists .vl-row-meta .mono{ display: block; }
  main.p-vendor-lists .vl-row-name{ grid-column: 2 / span 4; margin-top: 0; }
  main.p-vendor-lists .vl-row-need{ grid-column: 6 / span 4; margin-top: 0; }
  main.p-vendor-lists .vl-row-cycle{ grid-column: 10 / -1; margin-top: 0; }

  main.p-vendor-lists .vl-data{ margin-top: calc(120 * var(--u)); }
  main.p-vendor-lists .vl-data-shot{
    grid-column: 1 / span 5;
    aspect-ratio: auto;
    align-self: stretch;
    min-height: calc(420 * var(--u));
  }
  main.p-vendor-lists .vl-data-figs{ grid-column: 7 / -1; }
  main.p-vendor-lists .vl-fig-n{ font-size: calc(64 * var(--u)); }

  main.p-vendor-lists .vl-btn-row{ margin-top: calc(100 * var(--u)); }
  main.p-vendor-lists .vl-btn-wrap{ grid-column: 5 / span 3; }
  main.p-vendor-lists .vl-btn-mask{
    display: block; position: absolute; z-index: -1;
    top: 0; bottom: 0; left: calc(-13.14 * var(--u));
    width: calc(276.11 * var(--u));
    background: var(--paper);
  }
}

/* ---- the two-span sweep button (source Button component) ------------- */
main.p-vendor-lists .vl-btn{
  display: inline-block; position: relative; overflow: hidden;
  text-align: center; text-decoration: none;
  border: 1px solid var(--teal);
}
main.p-vendor-lists .vl-btn-label,
main.p-vendor-lists .vl-btn-sweep{
  display: block;
  font-family: var(--mono); font-weight: 400;
  font-size: calc(14 * var(--u)); line-height: calc(14 * var(--u));
  letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap;
}
main.p-vendor-lists .vl-btn-sweep{
  position: absolute; inset: 0;
  transform: scaleX(.5) translateY(101%);
  transform-origin: center bottom;
}
main.p-vendor-lists .vl-btn-solid{
  width: 100%;
  background: var(--teal);
}
main.p-vendor-lists .vl-btn-solid .vl-btn-label,
main.p-vendor-lists .vl-btn-solid .vl-btn-sweep{ padding: calc(25 * var(--u)) calc(46 * var(--u)); }
main.p-vendor-lists .vl-btn-solid .vl-btn-label{ color: var(--paper); }
main.p-vendor-lists .vl-btn-solid .vl-btn-sweep{ color: var(--white); background: var(--teal-deep); }

main.p-vendor-lists .vl-btn-ghost{
  background: var(--paper);
}
main.p-vendor-lists .vl-btn-ghost .vl-btn-label,
main.p-vendor-lists .vl-btn-ghost .vl-btn-sweep{ padding: calc(21 * var(--u)); }
main.p-vendor-lists .vl-btn-ghost .vl-btn-label{ color: var(--teal); }
main.p-vendor-lists .vl-btn-ghost .vl-btn-sweep{ color: var(--paper); background: var(--teal); }

@media (min-width:1024px){
  main.p-vendor-lists .vl-btn-solid{
    width: calc(247.98 * var(--u));
    margin-left: calc(15 * var(--u));
  }
}

/* =====================================================================
   5 · CTA BANNER
   ===================================================================== */
main.p-vendor-lists .vl-cta{ padding-bottom: calc(20 * var(--u)); }
main.p-vendor-lists .vl-hr{
  border: 0; border-top: 1px solid var(--teal);
  height: 1px; overflow: hidden;
}
main.p-vendor-lists .vl-hr-b{ margin-top: calc(50 * var(--u)); }
main.p-vendor-lists .vl-cta-in{
  display: flex; flex-direction: column; align-items: center;
  margin: calc(50 * var(--u)) 0;
}
main.p-vendor-lists .vl-cta-h{
  text-align: center; color: var(--teal); font-weight: 400;
  width: 100%;
}
main.p-vendor-lists .vl-cta-in .vl-btn{ margin-top: calc(64 * var(--u)); }

@media (min-width:1024px){
  main.p-vendor-lists .vl-cta{ margin-top: calc(35 * var(--u)); padding-bottom: calc(12 * var(--u)); }
  main.p-vendor-lists .vl-cta-h{ width: 81.25vw; }
}

/* legibility: open the leading on the multi-line hero paragraph */
main.p-vendor-lists .vl-hero-p{ line-height:1.3 }

main.p-vendor-lists .page-text{ line-height:1.3 }
main.p-vendor-lists .vl-data-shot{position:relative; overflow:hidden}
main.p-vendor-lists .vl-data-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* =====================================================================
   2026-08 REBUILD — hero scrim, condensed approach, gates rail,
   document pack, register table, sourced figures
   ===================================================================== */

/* ---- hero scrim + source line --------------------------------------- */
main.p-vendor-lists .vl-hero-img{ position: relative; }
main.p-vendor-lists .vl-hero-img::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 40%, rgba(7,20,18,.55) 72%);
}
/* the word sits in ink across the top of the plate, so the top of the plate is
   lifted to paper under it and released before the picture reads (2026-09-09) */
main.p-vendor-lists .vl-hero-img::before{
  content:""; position:absolute; left:0; right:0; top:0; height:46%; z-index:1;
  background: linear-gradient(180deg, rgba(234,232,226,.88) 0%, rgba(234,232,226,.62) 46%, rgba(234,232,226,0) 100%);
  pointer-events:none;
}
@media (max-width:1023px){
  main.p-vendor-lists .vl-hero-img::before{ height:34% }
}
main.p-vendor-lists .vl-hero-img img{
  display:block; width:100%; height:100%; object-fit:cover;
}
@media (max-width:1023px){
  main.p-vendor-lists .vl-hero-img::after{
    background: linear-gradient(180deg, rgba(7,20,18,.6) 0%, rgba(7,20,18,.4) 38%, transparent 68%);
  }
}
main.p-vendor-lists .vl-hero-src{
  margin-top: calc(16 * var(--u));
  opacity: .75;
}

@media(max-width:767px){
 main.p-vendor-lists .vl-hero-img{aspect-ratio:4/5}
 main.p-vendor-lists .vl-hero-p{background:#07403D;padding:1.2rem;line-height:1.55}
}

/* ---- approach, condensed -------------------------------------------- */
main.p-vendor-lists .vl-appr-item{
  border-top: 0;
  padding: 0;
}
main.p-vendor-lists .vl-appr-item p{
  font-size: calc(22 * var(--u));
  line-height: 1.45;
}
main.p-vendor-lists .vl-appr-mono{ margin: calc(34 * var(--u)) 0 0; }
main.p-vendor-lists .vl-appr-mono2{ margin: calc(14 * var(--u)) 0 calc(40 * var(--u)); }
main.p-vendor-lists .vl-appr-mono p,
main.p-vendor-lists .vl-appr-mono2 p{
  color: var(--teal);
  border-top: 1px solid var(--teal);
  padding-top: calc(12 * var(--u));
}
@media (min-width:1024px){
  main.p-vendor-lists .vl-appr-grid{ grid-template-rows: none; }
  main.p-vendor-lists .vl-appr-h{
    grid-column: 3 / span 5; grid-row: auto;
    margin-top: calc(120 * var(--u));
  }
  main.p-vendor-lists .vl-appr-body{
    grid-column: 3 / span 6; grid-row: auto;
    margin: calc(30 * var(--u)) 0 calc(110 * var(--u));
  }
  main.p-vendor-lists .vl-appr-mono,
  main.p-vendor-lists .vl-appr-mono2{ width: calc(560 * var(--u)); }
}

/* ---- the six gates (dark pinned rail) -------------------------------- */
main.p-vendor-lists .vl-gates{
  background: var(--teal-deep);
  color: var(--paper);
  overflow: hidden;
  --mark-size: clamp(112px, 13vw, 176px);
}
main.p-vendor-lists .vl-gates .vl-rail .eyebrow{
  border-top-color: rgba(234,232,226,.35);
}
main.p-vendor-lists .vl-gates .eyebrow .mono{ color: var(--paper); }

main.p-vendor-lists .gates-pin{
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh;
  padding: calc(70 * var(--u)) 0 calc(50 * var(--u));
}
main.p-vendor-lists .gates-h{ color: var(--paper); font-weight: 400; }
/* the mark holds the left post. Its ring never turns; the crosshair does,
   90 degrees per gate, square whenever a number is centred under it.       */
main.p-vendor-lists .gates-mark{
  position: relative; z-index: 2;
  align-self: flex-start;
  width: var(--mark-size); height: var(--mark-size);
  margin: calc(26 * var(--u)) 0 0;
  color: var(--paper);
  will-change: transform;
}
main.p-vendor-lists .gates-mark-svg{
  display: block; width: 100%; height: 100%; overflow: visible;
}
main.p-vendor-lists .mark-ring{ opacity: .92; }
main.p-vendor-lists .mark-cross{ opacity: .26; }
/* sight line: the crosshair's own axis carried down to the number row.
   JS sets top and height from the measured gap; it retracts on release.   */
main.p-vendor-lists .gates-axis{
  position: absolute; left: 50%; top: 100%;
  width: 1px; height: 0; margin-left: -.5px;
  background: currentColor; opacity: .09;
  transform-origin: 50% 0;
}

main.p-vendor-lists .gates-track{
  position: relative; z-index: 1;
  display: flex;
  align-items: stretch;
  will-change: transform;
}
main.p-vendor-lists .gate{
  flex: 0 0 clamp(300px, 30vw, 440px);
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(234,232,226,.3);
  /* the top padding is the corridor the mark looks down. It is a fixed
     length, so every number sits on the same line whatever its copy runs to */
  padding: clamp(150px, 30vh, 300px) clamp(20px, 2.2vw, 40px) calc(10 * var(--u));
}
main.p-vendor-lists .gate-n{
  display: block;
  align-self: flex-start;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(84px, 9.5vw, 138px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
main.p-vendor-lists .gate-t{
  margin-top: calc(20 * var(--u));
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2;
  color: var(--paper);
}
main.p-vendor-lists .gate-do{
  margin-top: calc(12 * var(--u));
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.45;
  color: rgba(234,232,226,.85);
  max-width: 36ch;
}
main.p-vendor-lists .gate-you{
  margin-top: calc(12 * var(--u));
  color: rgba(234,232,226,.6);
}
main.p-vendor-lists .gate-dur{ margin-top: calc(6 * var(--u)); color: rgba(234,232,226,.6); }
main.p-vendor-lists .gate-dur:empty{ display: none; }

/* short viewports: shorten the corridor so the pin still fits one screen */
@media (min-width:768px) and (max-height:840px){
  main.p-vendor-lists .vl-gates{ --mark-size: clamp(96px, 10.5vw, 140px); }
  main.p-vendor-lists .gate{ padding-top: clamp(120px, 24vh, 240px); }
}

/* below 768px the rail is a plain vertical list: no rotation, no travel */
@media (max-width:767px){
  main.p-vendor-lists .gates-pin{ min-height: 0; padding: calc(60 * var(--u)) 0 calc(40 * var(--u)); }
  main.p-vendor-lists .gates-track{ flex-direction: column; }
  main.p-vendor-lists .gate{
    flex: none; width: 100%;
    border-left: 0; border-top: 1px solid rgba(234,232,226,.3);
    padding: calc(22 * var(--u)) 0 calc(26 * var(--u));
  }
  main.p-vendor-lists .gate-n{ font-size: clamp(64px, 18vw, 84px); }
  main.p-vendor-lists .gates-mark{
    width: 72px; height: 72px;
    margin: calc(24 * var(--u)) 0 calc(28 * var(--u));
  }
  main.p-vendor-lists .mark-cross{ opacity: 1; }
  main.p-vendor-lists .gates-axis{ display: none; }
}

/* reduced motion on desktop gets the same plain list rather than a clipped rail */
@media (prefers-reduced-motion:reduce) and (min-width:768px){
  main.p-vendor-lists .gates-pin{ min-height: 0; padding: calc(60 * var(--u)) 0 calc(40 * var(--u)); }
  main.p-vendor-lists .gates-track{ flex-direction: column; }
  main.p-vendor-lists .gate{
    flex: none; width: 100%; max-width: calc(760 * var(--u));
    border-left: 0; border-top: 1px solid rgba(234,232,226,.3);
    padding: calc(22 * var(--u)) 0 calc(26 * var(--u));
  }
  main.p-vendor-lists .mark-cross{ opacity: 1; }
  main.p-vendor-lists .gates-axis{ display: none; }
}

/* ---- the document pack ----------------------------------------------- */
main.p-vendor-lists .vl-pack{
  padding-top: calc(24 * var(--u));
  padding-bottom: calc(60 * var(--u));
}
main.p-vendor-lists .vl-pack-grid{ margin-top: calc(60 * var(--u)); row-gap: calc(30 * var(--u)); }
main.p-vendor-lists .vl-pack-lead{
  grid-column: 1 / -1;
  font-family: var(--sans); font-weight: 400;
  font-size: calc(22 * var(--u)); line-height: 1.4;
  color: var(--teal);
  max-width: 26ch;
}
main.p-vendor-lists .vl-pack-list{
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
}
main.p-vendor-lists .vl-pack-list li{
  display: flex; gap: calc(18 * var(--u));
  border-top: 1px solid var(--teal);
  padding: calc(12 * var(--u)) 0;
  color: var(--teal);
}
main.p-vendor-lists .vl-pack-list li:last-child{ border-bottom: 1px solid var(--teal); }
main.p-vendor-lists .vl-pack-list li .mono{ color: var(--teal); }
main.p-vendor-lists .vl-pack-list li span:last-child{
  font-family: var(--mono);
  font-size: calc(13 * var(--u)); line-height: calc(15.96 * var(--u));
  text-transform: uppercase; letter-spacing: .02em;
}
@media (min-width:1024px){
  main.p-vendor-lists .vl-pack-lead{ grid-column: 3 / span 3; }
  main.p-vendor-lists .vl-pack-list{ grid-column: 7 / -1; }
}

/* ---- where you register: columned table ------------------------------- */
main.p-vendor-lists .vl-thead{
  display: none;
  border-top: 1px solid var(--teal);
  padding: calc(12 * var(--u)) 0;
}
main.p-vendor-lists .vl-thead .mono{ color: var(--teal); opacity: .65; }
main.p-vendor-lists .vl-tbl .vl-row{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--gap);
  row-gap: calc(14 * var(--u));
  padding: calc(22 * var(--u)) 0 calc(30 * var(--u));
}
main.p-vendor-lists .vl-c{ grid-column: auto; }
main.p-vendor-lists .vl-c h3{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(24 * var(--u)); line-height: 1.15;
  color: var(--teal);
  margin-top: calc(10 * var(--u));
}
main.p-vendor-lists .vl-cn{ display: block; color: var(--teal); }
main.p-vendor-lists .vl-cl{ display: block; color: var(--teal); opacity: .55; margin-bottom: calc(5 * var(--u)); }
main.p-vendor-lists .vl-c p{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(15 * var(--u)); line-height: 1.45;
  color: var(--teal);
}
main.p-vendor-lists .vl-note{
  grid-column: 1 / -1;
  border-top: 1px dashed rgba(11,92,88,.4);
  padding-top: calc(12 * var(--u));
}
main.p-vendor-lists .vl-note p{ color: var(--teal); }
main.p-vendor-lists .vl-note p + p{ margin-top: calc(8 * var(--u)); }
main.p-vendor-lists .vl-src{
  font-size: calc(10 * var(--u)) !important;
  opacity: .6;
  margin-top: calc(6 * var(--u));
}
@media (min-width:1024px){
  main.p-vendor-lists .vl-thead,
  main.p-vendor-lists .vl-tbl .vl-row{
    display: grid;
    grid-template-columns: 2fr 2.9fr 2fr 1.1fr 1.5fr;
    column-gap: var(--gap);
  }
  main.p-vendor-lists .vl-cl{ display: none; }
  main.p-vendor-lists .vl-c h3{ margin-top: calc(14 * var(--u)); font-size: calc(26 * var(--u)); }
  main.p-vendor-lists .vl-note{ grid-column: 2 / -1; margin-top: calc(10 * var(--u)); }
}

/* figures: source lines */
main.p-vendor-lists .vl-fig .vl-src{ border-top: 0; padding-top: 0; }
main.p-vendor-lists .vl-fig-n{ font-variant-numeric: tabular-nums; }

/* numbers section now carries the button row. The bottom padding stays at zero: the
   section reset used to force it there, so the page was drawn and reviewed with none,
   and the .vl-num-grid row is already locked at calc(582.86 * var(--u)) with shorter
   content in it. Letting the old declarations apply added 100px at 1440 and 76px at 390
   to a band that was already 196px, and it reads as a hole above the services rule. */
main.p-vendor-lists .vl-numbers{ padding-bottom: 0; }

/* thead spans the full row grid */
main.p-vendor-lists .vl-thead{ grid-column: 1 / -1; }

/* mobile: the register rows keep the list name and who routes through it;
   the file and renewal cells are desktop detail */
@media (max-width:639px){
  .vl-row > div.vl-c:nth-of-type(3), .vl-row > div.vl-c:nth-of-type(4){display:none}
  .vl-thead span:nth-of-type(3), .vl-thead span:nth-of-type(4){display:none}
}

/* ---------------------------------------------------------------------
   "Where you register" in the display face.
   Bruno Ace SC is wide: "Where you" runs 6.6x its own font-size, so the
   old fixed 160px title overran its column, wrapped to three lines and
   painted over the register table, whose row was locked at 300px.
   The title is now sized to the viewport, the column is widened, and the
   row can grow, so the heading can never reach the table again.
   --------------------------------------------------------------------- */
main.p-vendor-lists .vl-title{
  font-size: min(calc(80 * var(--u)), 12.6vw);
  line-height: 1.02;
  max-width: 100%;
}
@media (min-width:1024px){
  main.p-vendor-lists .vl-title-row{ grid-template-rows: minmax(calc(300 * var(--u)), auto); }
  main.p-vendor-lists .vl-title{
    grid-column: 3 / -1;
    font-size: min(calc(150 * var(--u)), 168px);
    line-height: 1;
  }
}

/* ---- Where you register (2026-09-09, Marlo): the four column table is gone. One ruled
   ledger, one row per register, each row the link to that register's own page. Name in the
   display face, the sentence beside it, the renewal in mono at the end. Hovering a row drops
   the others, the way the sector ledger does. ---- */
main.p-vendor-lists .vl-reg{ list-style: none; margin: calc(30 * var(--u)) 0 0; padding: 0;
  border-top: 1px solid var(--ink) }
main.p-vendor-lists .vl-reg-row{ border-bottom: 1px solid var(--line); transition: opacity .3s var(--e-out) }
@media (hover: hover){
  main.p-vendor-lists .vl-reg:hover .vl-reg-row{ opacity: .38 }
  main.p-vendor-lists .vl-reg .vl-reg-row:hover{ opacity: 1 }
}
main.p-vendor-lists .vl-reg-a{ display: grid; grid-template-columns: 1fr; gap: calc(8 * var(--u));
  padding: calc(24 * var(--u)) 0; text-decoration: none; color: var(--ink) }
@media (min-width: 900px){
  main.p-vendor-lists .vl-reg-a{ grid-template-columns: calc(300 * var(--u)) minmax(0, 1fr) calc(150 * var(--u)) calc(110 * var(--u));
    gap: calc(34 * var(--u)); align-items: baseline }
}
main.p-vendor-lists .vl-reg-n{ font-family: var(--display); font-weight: 500; letter-spacing: -.01em;
  font-size: calc(20 * var(--u)); line-height: 1.15 }
[dir="rtl"] main.p-vendor-lists .vl-reg-n{ letter-spacing: 0; line-height: 1.35 }
main.p-vendor-lists .vl-reg-d{ font-size: calc(15 * var(--u)); line-height: 1.55; color: var(--deep); max-width: 56ch }
main.p-vendor-lists .vl-reg-r{ color: var(--muted); font-size: calc(11 * var(--u)); line-height: 1.5 }
main.p-vendor-lists .vl-reg-r i{ display: block; font-style: normal; opacity: .62; margin-bottom: calc(4 * var(--u)) }
main.p-vendor-lists .vl-reg-go{ color: var(--muted); font-size: calc(10.5 * var(--u)); letter-spacing: .09em;
  text-transform: uppercase; transition: color .25s }
main.p-vendor-lists .vl-reg-row:hover .vl-reg-go{ color: var(--teal) }
[dir="rtl"] main.p-vendor-lists .vl-reg-r,
[dir="rtl"] main.p-vendor-lists .vl-reg-go{ letter-spacing: 0; text-transform: none; font-size: calc(12 * var(--u)) }