/* ── p-suppliers.css — the Parts suppliers page (suppliers.html) ────────────
   Builds on inner-pages.css (hero, points, split, steps, CTA). Page-only pieces:
   the hero's sample "parts request" card and port, the facts row, and the
   navy supply-chain panel (Your stock → warehouse → parts centre → van → job)
   whose line and van p-suppliers.js positions, and the lines around the
   supplier flow's inline first step at the end. Finished state is the plain
   CSS; hidden start states only exist under html.fx-motion.              */

/* ── hero ── */
.sp-hero .s6-wrap { position: relative; z-index: 1; }
.sp-hero .sp-hline { left: 0; top: 0; }
.sp-hero-text { min-width: 0; }
.sp-hero h1 > span { display: block; }
.sp-hero-media { position: relative; min-width: 0; }
.sp-hero .p6-media img { object-position: 50% 55%; }
.sp-hero .sp-port {
  position: absolute; z-index: 3; top: 0; left: var(--port-x, 64%); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 57, 108, .18), 0 3px 8px -2px rgba(0, 57, 108, .3);
}
.sp-hero .sp-port::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--gold); }

/* the text link beside a button (the landing's "Explore" link) */
.sp-more {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 2px;
  font: 700 15px/1 var(--font); color: var(--navy); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 12px) / 0 1.5px no-repeat; transition: background-size .3s var(--ease);
}
.sp-more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.sp-ctas { align-items: center; gap: 10px 22px !important; }
.sp-ctas .btn { padding: 0 10px 0 20px; gap: 14px; }
.sp-ctas .btn .ic { margin-right: 0; transition: transform .2s var(--ease); }
.sp-ctas .btn .ic svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .sp-more:hover { background-size: calc(100% - 24px) 1.5px; }
  .sp-more:hover svg, .sp-ctas .btn:hover .ic { transform: translateX(3px); }
}

/* facts: the two figures the brief allows here */
.sp-facts { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 32px; margin-top: clamp(28px, 4vh, 40px); padding-top: 20px; border-top: 1px solid var(--line); max-width: 480px; }
.sp-facts .lbl, .sp-kinds .lbl { width: 100%; margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sp-facts dl { display: flex; gap: 32px; margin: 0; }
.sp-facts dl > div { display: flex; align-items: baseline; gap: 10px; }
.sp-facts dt { font: 700 clamp(28px, 2.3vw, 34px)/1 var(--font); letter-spacing: -.02em; color: var(--navy); }
.sp-facts dd { margin: 0; font: 600 14px/1.3 var(--font); color: var(--text); white-space: nowrap; }

/* the sample parts request floating on the photo */
.sp-req {
  position: absolute; z-index: 3; left: clamp(-28px, -2vw, -12px); bottom: clamp(18px, 3vw, 34px); width: min(284px, 68%);
  background: var(--card); border-radius: 18px; padding: 14px 16px 10px; border: 1px solid rgba(0, 57, 108, .07); box-shadow: var(--shadow-lift);
}
.sp-req .top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sp-req .top b { font: 700 15px/1.2 var(--font); color: var(--ink); flex: 1; min-width: 0; }
.sp-req .ib { width: 32px; height: 32px; border-radius: 9px; background: #EAF1F8; display: grid; place-items: center; flex: none; }
.sp-req .ib .i2 { width: 18px; height: 18px; color: var(--navy); --acc: var(--gold); }
.sp-req dl { margin: 0; }
.sp-req dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.sp-req dl > div:last-child { border-bottom: 0; }
.sp-req dt { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-req dd { margin: 0; font: 600 13.5px/1.25 var(--font); color: var(--ink); text-align: right; }
.sp-req dd.ok { display: inline-flex; align-items: center; gap: 6px; color: #17663A; }
.sp-req dd.ok svg { width: 16px; height: 16px; color: #17803F; --acc: #17803F; }

/* ── what you get: the "Coming" card reads as not-yet ── */
.sp-get .p6-point { position: relative; }
.sp-get .sp-soon { background: transparent; border-style: dashed; border-color: rgba(0, 57, 108, .22); }
.sp-get .sp-soon .p6-tag { position: absolute; top: 20px; right: 20px; }
.sp-get .sp-soon .ib { background: var(--gold-30); }

/* ── the supply chain panel ── */
.sp-chain { scroll-margin-top: 90px; }   /* the #chain link parks the panel just under the nav (p-suppliers.js finishes the trail there) */
.sp-chain {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-panel);
  padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 64px) clamp(44px, 5vw, 72px);
  background:
    radial-gradient(55% 60% at 96% 30%, rgba(10, 74, 133, .95) 0%, rgba(10, 74, 133, 0) 72%),
    radial-gradient(50% 45% at 4% 100%, rgba(0, 57, 108, .95) 0%, rgba(0, 57, 108, 0) 70%),
    radial-gradient(38% 30% at 50% 100%, rgba(247, 183, 68, .10) 0%, rgba(247, 183, 68, 0) 70%),
    var(--navy-deep);
  color: #D5E1EE;
}
.sp-chain::before {   /* blueprint grid, faded toward the edges (as the landing's navy panel) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(186, 206, 223, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(186, 206, 223, .055) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 80%);
}
.sp-chain-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 40px; margin-bottom: clamp(30px, 4vw, 52px); }
.sp-chain .s6-h2 { color: #fff; } .sp-chain .s6-h2 .mut { color: var(--mist); }
.sp-chain .s6-lede { color: #A9BDD1; max-width: 34ch; }

/* the flow: [src] / [01] ··· [02] / spacer / [04] ← van ← [03]   (a U, read clockwise) */
.sp-flow {
  --cw: clamp(210px, 21vw, 300px);            /* station width */
  --vw: clamp(200px, 19vw, 290px);            /* van width */
  --ip: 18px; --ib: 46px;                     /* station padding and icon size: the line runs through the icon centres */
  --si: 56px;                                 /* the source's glass icon */
  position: relative; display: grid; align-items: center;
  grid-template-columns: var(--cw) minmax(0, 1fr) var(--cw);
  grid-template-rows: auto auto clamp(36px, 4.4vw, 64px) auto;
  grid-template-areas: "src src src" "s1 . s2" ". . ." "s4 van s3";   /* the source label may run past 01's width */
  column-gap: clamp(28px, 4vw, 60px); row-gap: 26px;
}
.sp-flow .sp-stations { display: contents; }
.sp-flow .s1 { grid-area: s1; } .sp-flow .s2 { grid-area: s2; } .sp-flow .s3 { grid-area: s3; } .sp-flow .s4 { grid-area: s4; }

.sp-lines { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
.sp-lines path { fill: none; stroke-linecap: round; }
.sp-lines .bs path { stroke: rgba(186, 206, 223, .3); stroke-width: 1.4; }
.sp-lines .tl path { stroke: var(--gold); stroke-width: 2; visibility: hidden; }
.sp-lines .pt .o { fill: #0A4A85; stroke: rgba(186, 206, 223, .5); stroke-width: 1.2; transition: stroke .4s ease; }
.sp-lines .pt .i { fill: rgba(213, 225, 238, .55); transition: fill .4s ease; }
.sp-lines .pt.on .o { stroke: var(--gold); } .sp-lines .pt.on .i { fill: var(--gold); }
.sp-lines .hd { visibility: hidden; }
.sp-lines .hd .dot { fill: #FFD487; }
.sp-lines .hd .glow { fill: rgba(247, 183, 68, .28); }

/* the source chip: the glass supplier icon, where your stock enters, with its label beside it.
   The icon box is exactly the glass icon's size (--si; the default 64px icon in the old 48px tile spilled over
   "Your stock"), and the gap leaves room for the orange shape's tilt and its hover turn. The glass tile sits
   bottom-left in the icon (76% of it, centre at 38%), so the chip is shifted until that centre is over the
   station icons: p-suppliers.js starts the line at the glass tile's bottom edge, straight down into 01. */
.sp-src {
  grid-area: src; justify-self: start; position: relative; z-index: 2; display: flex; align-items: center; gap: 18px;
  margin: 0 0 8px calc(var(--ip) + var(--ib) / 2 - var(--si) * .38);
}
.sp-src .ico { width: var(--si); height: var(--si); flex: none; display: block; line-height: 0; }
.sp-src .ico .gi { --s: var(--si); }
.sp-src .t { display: grid; gap: 4px; min-width: 0; }
.sp-src b { font: 700 15.5px/1.2 var(--font); color: #fff; }
.sp-src small { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* a station */
.sp-st {
  position: relative; z-index: 2; display: grid; grid-template-columns: var(--ib) minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 16px var(--ip); border-radius: 18px; background: var(--navy); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .65); transition: border-color .5s var(--ease-std), box-shadow .5s var(--ease-std);
}
.sp-st .ib { width: var(--ib); height: var(--ib); border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; --acc: var(--gold); transition: background .5s var(--ease-std), border-color .5s var(--ease-std), color .5s var(--ease-std); }
.sp-st .ib svg { width: 22px; height: 22px; }
.sp-st .tx { min-width: 0; }
.sp-st .n { display: block; margin-bottom: 6px; font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--gold); }
.sp-st b { display: block; font: 700 16px/1.25 var(--font); color: #fff; letter-spacing: -.005em; }
.sp-st .d { display: block; margin-top: 4px; font: 500 13.5px/1.45 var(--font); color: rgba(213, 225, 238, .7); text-wrap: pretty; }
.sp-st.on { border-color: rgba(247, 183, 68, .5); box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .65), 0 0 0 1px rgba(247, 183, 68, .12); }
.sp-st.on .ib { background: var(--gold); border-color: var(--gold); color: var(--navy); --acc: var(--navy); }
/* the job: solid white, the destination */
.sp-st.end { background: #fff; border-color: #fff; }
.sp-st.end b { color: var(--ink); } .sp-st.end .d { color: var(--muted); } .sp-st.end .n { color: var(--gold-ink); }
.sp-st.end .ib { background: #EAF1F8; border-color: #EAF1F8; color: var(--navy); }
.sp-st.end.on .ib { background: var(--gold); border-color: var(--gold); }
.sp-st.end::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(247, 183, 68, .6); opacity: 0; }
.sp-st.end.is-hit::after { animation: sp-hit 1.2s var(--ease) both; }
@keyframes sp-hit { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(247, 183, 68, .7); } 100% { opacity: 0; box-shadow: 0 0 0 16px rgba(247, 183, 68, 0); } }

/* the van: a zero-height box on the road line; the car's wheels sit on the line (88% down the picture) */
.sp-van { grid-area: van; align-self: center; position: relative; z-index: 4; height: 0; pointer-events: none; }
.sp-van .car { position: absolute; right: 0; bottom: calc(var(--vw) * -.0680); width: var(--vw); will-change: transform; }
.sp-van img { display: block; position: relative; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.sp-van .shadow { position: absolute; left: 6%; right: 2%; bottom: -3%; height: 14%; rotate: -4deg; background: radial-gradient(closest-side, rgba(0, 10, 25, .55), rgba(0, 10, 25, 0)); }
.sp-van .speed { position: absolute; left: 97%; top: 34%; width: 22%; height: 36%; opacity: 0; }
.sp-van .speed i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(186, 206, 223, .6), rgba(186, 206, 223, 0)); }
.sp-van .speed i:nth-child(1) { top: 0; width: 70%; } .sp-van .speed i:nth-child(2) { top: 44%; width: 100%; left: 8%; } .sp-van .speed i:nth-child(3) { top: 88%; width: 55%; }

/* ── what we look for ── */
.sp-look-text { min-width: 0; }
.sp-need { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-need li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); font: 500 14.5px/1.5 var(--font); color: var(--muted); }
.sp-need .ib { width: 46px; height: 46px; border-radius: 13px; background: #EAF1F8; display: grid; place-items: center; }
.sp-need .ib svg { width: 23px; height: 23px; color: var(--navy); --acc: var(--gold); }
.sp-need b { display: block; font: 700 16.5px/1.3 var(--font); color: var(--ink); margin-bottom: 2px; }
.sp-kinds { margin-top: 26px; }
.sp-kinds .lbl { margin-bottom: 12px; }
.sp-kinds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-kinds li { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-navy); font: 600 14px/1 var(--font); color: var(--navy); }

/* ── steps and the end ── */
.sp-steps { list-style: none; margin: 0; padding: 0; }
.sp-join .p6-head { align-items: flex-end; }
/* the end: the application (application/views/forms/supplier.php, in .sp-apply; styled by assets/css/forms.css) */
.sp-end { scroll-margin-top: 90px; }
.sp-talk { margin: 26px 0 0; text-align: center; font: 500 15px/1.6 var(--font); color: var(--text); text-wrap: pretty; }
.sp-talk a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(0, 57, 108, .3); text-underline-offset: 4px; overflow-wrap: anywhere; }
.sp-talk a:hover { text-decoration-color: var(--c, var(--gold)); }
.sp-alt { margin: 10px 0 0; text-align: center; font: 500 15px/1.6 var(--font); color: var(--muted); }
.sp-alt a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(0, 57, 108, .3); text-underline-offset: 4px; }
.sp-alt a:hover { text-decoration-color: var(--gold); }

/* ── widths ── */
@media (max-width: 1100px) {
  .sp-flow { --cw: clamp(206px, 22vw, 260px); --vw: clamp(190px, 20vw, 240px); }
  .sp-st b { font-size: 15px; } .sp-st .d { font-size: 13px; }
}
/* tablets portrait and phones: one column, the line runs down through the icons; the van drives in between 03 and 04 */
@media (max-width: 899px) {
  .sp-hero .sp-hline { display: none; }
  .sp-hero .sp-port { display: none; }
  .sp-req { left: 14px; bottom: 14px; }
  .sp-flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "src" "s1" "s2" "s3" "van" "s4"; row-gap: 30px; max-width: 520px; }
  /* the van parks beside the line (clear of it, short of the cards' right edge), and p-suppliers.js only lets it
     drive in across the room left inside the panel, fading in, so it never runs off the panel's edge */
  .sp-van { height: auto; justify-self: start; width: min(360px, 100% - var(--ip) - var(--ib) / 2 - 44px); margin: 6px 0 2px calc(var(--ip) + var(--ib) / 2 + 24px); }
  .sp-van .car { position: relative; right: auto; bottom: auto; width: 100%; }
}
@media (max-width: 600px) {
  .sp-chain { border-radius: 26px; padding: 30px 16px 34px; }
  .sp-flow { --ip: 16px; --ib: 42px; --si: 52px; row-gap: 26px; }
  .sp-src { gap: 16px; }
  .sp-st { padding: 14px var(--ip); gap: 12px; border-radius: 16px; }
  .sp-st .ib { border-radius: 12px; }
  .sp-facts { gap: 12px 24px; } .sp-facts dl { gap: 24px; }
  .sp-facts dd { white-space: normal; max-width: 11ch; }
  .sp-req { width: min(250px, 76%); padding: 12px 14px 8px; left: 10px; bottom: 10px; }
  .sp-req dl > div { padding: 6px 0; }
  .sp-get .sp-soon .p6-tag { top: 18px; right: 18px; }
  .sp-need li { padding: 12px 14px 12px 12px; gap: 14px; }
}
@media (max-width: 380px) {
  .sp-ctas .btn { padding: 0 8px 0 16px; gap: 10px; font-size: 14.5px; }
  .sp-req { display: none; }
}