/* ============================================================
   SERVICE PAGE -- page-specific styles (design source service.html)

   Shared styles live in style.css (tokens / reset / .sec-* / .lead / .eyebrow /
   .btn / .hero base / .inq / .values / header / footer). This file only carries
   this page's own apparatus:
     hero override -> index map (two lanes on one floor) -> Lane 01 brand
     distributors -> Lane 02 e-commerce brands -> the shared foundation band
     -> the side-by-side comparison.

   File conventions (same as every other page css in the theme root):
   - every base declaration and its @media override live in THIS file, base first;
   - no tag-name selectors (#site-header etc. are in style.css) -- page css must
     never restate header/footer rules;
   - font sizes land on --fs-body / --fs-label / --fs-mini, display sizes use their
     own clamp;
   - comments in English.

   How this page differs from production: production argues capability (one vertical
   spine through four stages), service argues commitment (two parallel lanes that meet
   on one floor). So there is no spine here and no R1/V1 stage numbering -- these are
   not process steps -- and the mono keyword in each row does the indexing instead.
   ============================================================ */

/* ---------- hero ----------
   Same treatment as production / about: copy block on the left, mono doc line at the
   top, the facts band along the bottom.
   The title joins the shared "hero copy block" group in style.css, so its size is
   deliberately NOT set here -- this page gets the same clamp as kids / teen / adults /
   about and stays in step with them at every width. Only the copy-block width, the
   scrim and the sub measure are this page's own.
   The finished-row photo is mid-bright overall with a bright roof along the top, so the
   scrim presses once at the top and once from the left. */
.hero-block{width:min(700px,56%)}
.hero-top{position:static;display:block;margin:0 0 20px;justify-content:flex-start}
.ht-short{display:none}
.hero::after{background:
  linear-gradient(180deg,rgba(10,11,20,.7) 0%,rgba(10,11,20,.36) 24%,rgba(10,11,20,.04) 48%),
  linear-gradient(0deg,rgba(10,11,20,.92) 0%,rgba(10,11,20,.64) 28%,
    rgba(10,11,20,.2) 56%,rgba(10,11,20,.02) 78%),
  linear-gradient(90deg,rgba(10,11,20,.84) 0%,rgba(10,11,20,.5) 42%,
    rgba(10,11,20,.12) 68%,rgba(10,11,20,0) 90%)}
/* 54ch, not the inherited 60ch: the sub is long and at 60ch it pushed the copy stack up
   under the fixed header on the shorter laptop viewports this page is read on. Measured
   at 1280x720 the block clears the header by 100px at 54ch against 52px at 60ch. */
.hero .sub{max-width:54ch}
.hero-inner{padding-bottom:calc(clamp(28px,5vh,56px) + 44px)}
.hero-foot{left:var(--pad);right:var(--pad);bottom:clamp(14px,2.4vh,24px);justify-content:space-between}
@media(max-width:600px){
  .hero-block{width:auto}
  .ht-long{display:none}
  .ht-short{display:inline}
  .hero::after{background:
    linear-gradient(180deg,rgba(10,11,20,.68) 0%,rgba(10,11,20,.32) 26%,rgba(10,11,20,0) 48%),
    linear-gradient(0deg,rgba(10,11,20,.94) 0%,rgba(10,11,20,.7) 30%,
      rgba(10,11,20,.28) 58%,rgba(10,11,20,0) 82%)}
}

/* ---------- index map: two lanes landing on one floor ----------
   A 2px ink beam runs across, with one orange node per lane riding on it, and the beam
   drops straight into an ink block that is the "floor". No SVG -- borders and
   background colours form the whole thing. */
/* 2026-10 设计稿规则：不再用 1px 行/段分隔线（只保留 2px 墨色装置顶线、.head 行 2px 底线、
   深色带里的 1px 格子线、窄屏堆叠时的分隔线）。下面几处是 2026-10-10 按设计稿实测清掉的。 */
.svc-index{background:var(--paper-2);padding:clamp(72px,6vw,74px) 0}
.map-lab{font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);max-width:88ch;line-height:1.9}
.svc-map{margin-top:clamp(30px,4vw,48px)}
.map-lanes{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid var(--ink)}
.map-lane{position:relative;display:block;padding:0 clamp(20px,3vw,40px) clamp(24px,3vw,34px) 0}
.map-lane + .map-lane{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line)}
/* the node square riding on the beam */
.map-lane::after{content:"";position:absolute;left:0;bottom:-9px;width:16px;height:16px;background:var(--orange);z-index:2}
.map-lane + .map-lane::after{left:clamp(20px,3vw,40px)}
.ml-n{display:block;font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange)}
.ml-name{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,2.4vw,2.1rem);line-height:1;transition:color .25s}
/* one shared row for all three blocks: big text left, arrow pushed to the end of the
   line. The arrow is the only "this is clickable" cue, so it carries the orange. */
.map-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.map-head svg{flex:none;width:18px;height:18px;color:var(--orange);transition:transform .25s}
/* all three blocks (two lanes + the floor) share one hover response: the big text turns
   orange. The design source originally had the lanes fade and the floor recolour its
   title -- two different responses in one figure. */
.map-lane:hover .ml-name,.map-floor:hover .mf-name{color:var(--orange)}
.map-lane:hover .map-head svg,.map-floor:hover .mf-head svg{transform:translateX(5px)}
.ml-who{display:block;color:var(--muted);font-size:var(--fs-body);line-height:1.6;margin-top:12px;max-width:46ch}
/* the floor block = the ground */
.map-floor{display:grid;grid-template-columns:140px minmax(0,1fr);gap:0 clamp(20px,3vw,40px);
  align-items:baseline;background:var(--ink);color:var(--paper);
  padding:clamp(22px,3vw,34px) clamp(20px,3vw,40px)}
.mf-n{font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--orange)}
.mf-body{display:block;min-width:0}
.mf-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mf-head svg{flex:none;width:18px;height:18px;color:var(--orange);transition:transform .25s}
.mf-name{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.1rem,1.9vw,1.6rem);line-height:1.05;color:#fff;transition:color .25s}
.mf-who{display:block;color:rgba(243,241,234,.68);font-size:var(--fs-body);line-height:1.6;margin-top:9px;max-width:90ch}
@media(max-width:820px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track keeps an automatic min-content floor, and
     inside it sits .ml-name set in the display face at 2.4vw. "E-commerce" is one
     unbreakable word, so the floor is ~333px and the track refuses to go below it.
     At 320px the .wrap content box is only 280px -> the lane renders 52.8px wider than
     its container and the page scrolls sideways. minmax(0,1fr) lets the track shrink
     and the overflow-clip below trims the sliver that the word still needs. */
  .map-lanes{grid-template-columns:minmax(0,1fr)}
  .map-lane + .map-lane{border-left:0;
    padding:clamp(24px,3vw,34px) 0 clamp(24px,3vw,34px)}
  .map-lane{padding-right:0}
  .map-lane::after{display:none}
  /* clamp both boxes so no descendant can widen the grid track again */
  .map-lanes,.map-floor{overflow:hidden}
  .map-floor{grid-template-columns:1fr;gap:8px}
}
/* Below ~370px even the shrunk track is narrower than "E-commerce", so step the
   display size down as well -- 1.35rem is the clamp floor and still too wide here. */
@media(max-width:400px){
  .ml-name{font-size:1.15rem}
}

/* ---------- the two lanes ---------- */
.lane{padding:clamp(72px,7.5vw,108px) 0}
.lane.dist{background:var(--paper)}
.lane.ecom{background:var(--paper-2)}
.lane-head{max-width:940px}
/* register: a mono keyword indexes the left column, heading + body fill the right */
.lreg{margin-top:clamp(34px,4.6vw,58px);border-top:2px solid var(--ink)}
.lrow{display:grid;grid-template-columns:158px minmax(0,1fr);gap:0;
  padding:clamp(18px,2.2vw,26px) 0}
.lrow .key{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange);padding-right:22px;line-height:1.5}
.lrow h3{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.02rem;line-height:1.35}
.lrow p{color:var(--muted);font-size:var(--fs-body);line-height:1.65;margin-top:8px;max-width:90ch}
/* evidence strip: real photography plus staged shots, mono captions on ink */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(30px,3.8vw,48px)}
.strip figure{background:var(--ink);border:1px solid var(--line)}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
.strip figcaption{padding:11px 13px}
.strip figcaption b{display:block;font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.88)}
.strip figcaption span{display:block;font-family:var(--mono);font-size:var(--fs-mini);
  color:rgba(243,241,234,.52);margin-top:4px}
@media(max-width:900px){
  .lrow{grid-template-columns:1fr;gap:0}
  .lrow .key{padding:0 0 7px}
  .strip{grid-template-columns:1fr;gap:12px}
}

/* ---------- the shared floor (ink band) ---------- */
.floor{background:var(--ink);color:var(--paper);padding:clamp(72px,7.5vw,108px) 0}
.floor .sec-title{color:#fff}
.floor .lead{color:rgba(243,241,234,.7)}
/* six-cell board: a column-split grid, deliberately a different shape from the lane
   registers above -- the lanes use "mono key in the left column + a full row of body",
   the floor uses "key above the heading + three columns". */
.fgrid{margin-top:clamp(34px,4.6vw,58px);display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid rgba(243,241,234,.34)}
.fcell{border-bottom:1px solid var(--line-2);border-left:1px solid var(--line-2);
  padding:clamp(20px,2.3vw,28px) clamp(20px,2.3vw,28px) clamp(24px,2.8vw,34px)}
.fcell:nth-child(3n+1){border-left:0;padding-left:0}
.fcell .key{display:block;font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--orange)}
.fcell h3{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  font-size:1.02rem;line-height:1.35;color:#fff;margin-top:11px}
.fcell p{color:rgba(243,241,234,.66);font-size:var(--fs-body);line-height:1.62;margin-top:9px;max-width:46ch}
.fcell p a{border-bottom:1px solid rgba(240,149,10,.5);color:rgba(243,241,234,.9)}
.fcell p a:hover{color:var(--orange)}
/* commercial terms: no box, no columns -- one rule for the header, then four runs of
   "small orange label + value" laid out horizontally. It reads like the terms row at the
   foot of a drawing or a quotation, and deliberately contrasts with the column-split
   grids everywhere else on this page. */
.terms{margin-top:clamp(28px,3.6vw,42px)}
.terms-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;
  flex-wrap:wrap;border-top:2px solid rgba(243,241,234,.34);padding-top:clamp(15px,1.8vw,20px)}
.terms .th{font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--orange)}
.terms .tf{font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.1em;
  color:rgba(243,241,234,.48)}
.terms .tl{display:flex;flex-wrap:wrap;gap:10px clamp(26px,3.6vw,54px);margin-top:clamp(13px,1.7vw,18px)}
.terms .t{display:inline-flex;align-items:baseline;gap:11px;white-space:nowrap;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.05em;color:rgba(243,241,234,.88)}
.terms .t b{font-size:var(--fs-mini);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
/* narrow: nowrap would push the longest entry (AFTER-SALES ...) off-screen, so allow
   wrapping; below 560px go straight to label-above-value, which reads more steadily. */
@media(max-width:900px){
  .terms .t{white-space:normal}
}
@media(max-width:560px){
  .terms .t{display:grid;gap:3px;width:100%}
  .terms .tl{gap:14px 0}
}
@media(max-width:1000px){
  /* two columns: restate which cell in the row must not carry the left border */
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .fcell:nth-child(3n+1){border-left:1px solid var(--line-2);padding-left:clamp(20px,2.3vw,28px)}
  .fcell:nth-child(2n+1){border-left:0;padding-left:0}
}
@media(max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .fgrid .fcell{border-left:0;padding-left:0;padding-right:0}
}

/* ---------- the comparison table ---------- */
.cmp{background:var(--paper);padding:clamp(72px,7.5vw,108px) 0}
.cmp-tbl{margin-top:clamp(34px,4.6vw,52px);border-top:2px solid var(--ink)}
.cr{display:grid;grid-template-columns:minmax(150px,224px) 1fr 1fr;gap:0;
  padding:clamp(16px,2vw,22px) 0;align-items:baseline}
.cr > * + *{padding-left:clamp(16px,2.2vw,28px)}
.cr.head{font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
.cr b{font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.5}
.cr span{font-size:var(--fs-body);color:var(--muted);line-height:1.6}
.cmp-note{margin-top:clamp(22px,2.8vw,32px);font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.05em;color:var(--muted);max-width:96ch;line-height:1.75}
@media(max-width:820px){
  .cr{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 0}
  .cr > * + *{padding-left:0}
  .cr.head{display:none}
  .cr b{margin-bottom:2px}
  /* the column headers are gone, so put the column name back onto each value */
  .cr span::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:var(--fs-mini);
    font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);
    opacity:.85;margin-bottom:3px}
}