/* ==========================================================================
   About · 2026-10-16 merge of the Resources page (r2)
   1. .yab-certs   Certificates — ink-blue band right below the intro; title list + concave arc strip
   2. .yab-mfg     How we manufacture — dashed process line (4 steps)
   3. .yab-install Installation & delivery — staggered image grid (bottom of page)
   4. About-wide: no divider lines; section headings two steps smaller
   Pure CSS + assets/js/about-certs.js (no libraries).
   ========================================================================== */

/* ---------- 1. Certificates ---------- */
.yab-certs{--ink:#0E1733;position:relative;margin-top:clamp(40px,5vw,80px);padding:clamp(120px,12vw,180px) 0;color:var(--ya-cream);
  background:linear-gradient(180deg,rgba(14,23,51,0) 0,var(--ink) clamp(110px,11vw,170px),var(--ink) calc(100% - clamp(110px,11vw,170px)),rgba(14,23,51,0) 100%)}
.yab-certs__inner{display:grid;gap:clamp(18px,2.4vw,34px)}
.yab-certs__head{max-width:980px;margin:0 auto;padding:0 var(--ya-pad);text-align:center}
.yab-certs__head .yab-certs__eyebrow{justify-content:center}
.yab-certs__eyebrow{display:flex;gap:18px;margin:0 0 18px!important;color:rgba(251,247,233,.72);font-size:11px;font-weight:650;letter-spacing:.14em}
.yab-certs__eyebrow span{color:var(--ya-orange)}
.ya-about .yab-certs h2{color:var(--ya-cream)}
.yab-certs__lead{max-width:620px;margin:12px auto 0!important;color:rgba(251,247,233,.7);font-size:14px;line-height:1.55!important}

.yab-arc{--arc-w:clamp(124px,10.4vw,190px);position:relative;min-width:0;outline:none}
.yab-arc__stage{position:relative;height:calc(var(--arc-w) * 1.414 * 1.5);perspective:900px;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.yab-arc:focus-visible .yab-arc__stage{outline:2px solid var(--ya-orange);outline-offset:-4px}
.yab-arc.is-dragging .yab-arc__stage{cursor:grabbing}
.yab-arc__ring{position:absolute;inset:0;margin:0;padding:0;list-style:none;transform-style:preserve-3d}
.yab-arc__card{position:absolute;top:50%;left:50%;width:var(--arc-w);aspect-ratio:1/1.414;margin:calc(var(--arc-w) * -0.707) 0 0 calc(var(--arc-w) * -0.5);
  background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.65);will-change:transform,opacity;backface-visibility:hidden}
.yab-arc__card figure{width:100%;height:100%;margin:0;overflow:hidden}
.yab-arc__card img{width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
.yab-arc__card.is-hot{box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 0 2px var(--ya-orange)}
/* without JS: a plain row */
.yab-arc:not(.is-ready) .yab-arc__stage{height:auto;overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.yab-arc:not(.is-ready) .yab-arc__ring{position:static;display:flex;gap:6px;padding:20px 0}
.yab-arc:not(.is-ready) .yab-arc__card{position:relative;top:auto;left:auto;margin:0;flex:0 0 var(--arc-w)}

.yab-arc__bar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:6px;padding:0 var(--ya-pad)}
.yab-arc__now{max-width:640px;margin:0!important;text-align:center;font-size:17px;line-height:1.5!important;color:rgba(251,247,233,.82)}
.yab-arc__now b{display:block;margin-bottom:6px;color:var(--ya-orange);font:700 13px/1.3 "Geist Mono Variable",ui-monospace,monospace;letter-spacing:.12em}
html body .yab-arc__btn{all:unset;box-sizing:border-box;display:grid;place-items:center;flex:none;width:38px;height:38px;min-width:0;min-height:0;border-radius:50%;border:1px solid rgba(251,247,233,.28);color:var(--ya-cream);cursor:pointer;transition:background .25s,color .25s}
html body .yab-arc__btn:hover,html body .yab-arc__btn:focus-visible{background:var(--ya-cream);color:var(--ya-ink)}
.yab-arc__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 2. How we manufacture · process line ---------- */
.yab-mfg__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.6fr);gap:clamp(36px,8vw,140px);align-items:end}
.yab-mfg__head p{max-width:440px;color:var(--ya-muted);font-size:15px}
.yab-line{position:relative;margin-top:clamp(44px,5vw,80px)}
.yab-line__path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.yab-line__path path{fill:none;stroke:var(--ya-ink);stroke-width:1.4;stroke-dasharray:5 7;opacity:.55}
.yab-line__steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,52px);margin:0;padding:0;list-style:none}
.yab-line__step:nth-child(even){margin-top:64px}
.yab-line__step{display:flex;flex-direction:column;align-items:flex-start}
.yab-line__step > .yab-line__dot{margin:0 0 14px 6px}
.yab-line__step figure{width:100%}
.yab-line__step figure{aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:#ddd7c6}
.yab-line__step figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.yab-line__step:hover figure img{transform:scale(1.04)}
.yab-line__copy{margin-top:14px}
.yab-line__dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ya-ink);color:var(--ya-cream);font-size:13px;font-weight:600;line-height:1;box-shadow:0 0 0 5px var(--ya-cream)}
.yab-line__label{color:var(--ya-muted);font-size:12px;letter-spacing:.04em}
.ya-about .yab-line__step h3{margin-top:2px;font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.yab-line__text{margin-top:6px!important;color:var(--ya-body);font-size:14px;line-height:1.5!important}

/* ---------- 3. Installation & delivery · staggered grid ---------- */
.yab-install__panel{padding:clamp(22px,2.6vw,40px);border-radius:6px;background:#EFEADC}
.yab-install__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.62fr);gap:clamp(24px,6vw,100px);align-items:end;padding-bottom:clamp(10px,1.2vw,16px)}
.yab-install__head p{max-width:460px;color:var(--ya-muted);font-size:15px}
.yab-install__grid{display:grid;grid-template-columns:1.18fr .74fr 1.18fr .74fr 1.18fr;gap:clamp(8px,1vw,16px);align-items:start;margin:clamp(20px,2.4vw,32px) 0 0;padding:0;list-style:none}
.yab-install__item figure{overflow:hidden;background:#d8d3c4}
.yab-install__item figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.yab-install__item:hover figure img{transform:scale(1.04)}
.yab-install__item:nth-child(odd) figure{aspect-ratio:1/1.08}
.yab-install__item:nth-child(even) figure{aspect-ratio:.92/1}
.yab-install__cap{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.yab-install__no{flex:none;font-family:YASchibsted,YAFustat,sans-serif;font-size:clamp(26px,2.4vw,38px);font-weight:500;line-height:.9;letter-spacing:-.05em;color:var(--ya-ink)}
.yab-install__cap h3{padding-top:2px;font-size:14px;font-weight:700!important;line-height:1.2;letter-spacing:-.01em!important}
.yab-install__cap p{margin-top:3px!important;color:var(--ya-body);font-size:12.5px;line-height:1.42!important}
.yab-install__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:clamp(28px,3vw,44px)}
.yab-install__foot p{color:var(--ya-body);font-size:14px}
.yab-install__actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* ---------- 4. About-wide: no divider lines, smaller section headings ---------- */
body.ya-about .ya-section__rule{border-top:0!important;padding-top:0;margin-bottom:clamp(28px,3.6vw,52px)}
/* 2026-10-16：标题字号统一下调两档（原 clamp(44px,6.2vw,92px) 一类 → 约 66px 封顶） */
.ya-about .yab-global__head h2,.ya-about .yab-showroom h2,.ya-about .yab-mfg__head h2{font-size:clamp(32px,4.4vw,66px)!important;line-height:1}
/* 2026-10-16 r4：About 所有板块标题统一为「From Foshan to different markets.」同一尺寸 */
.ya-about .yab-certs h2,.ya-about .yab-install__head h2{font-size:clamp(32px,4.4vw,66px)!important;line-height:1}

@media (max-width:1100px){
  .yab-certs__inner{grid-template-columns:1fr;padding:0}
  .yab-certs__side{padding:0 var(--ya-pad)}
  .yab-line__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .yab-install__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .yab-install__item:nth-child(even){margin-top:56px}
}
@media (max-width:767px){
  .yab-certs{padding:96px 0}
  .yab-certs__inner{gap:18px}
  .yab-arc{--arc-w:clamp(96px,26vw,128px)}
  .yab-arc__bar{padding:0 16px}
  .yab-mfg__head,.yab-install__head{grid-template-columns:1fr;gap:14px}
  .yab-line__path{display:none}
  .yab-line__steps{grid-template-columns:1fr;gap:28px;padding:0 0 0 0;border-left:1.4px dashed rgba(14,23,51,.4);margin-left:15px;padding-left:22px}
  .yab-line__step:nth-child(even){margin-top:0}
  .yab-line__step > .yab-line__dot{position:absolute;left:-37px;top:0;margin:0}
  .yab-line__step{position:relative}
  .yab-install__panel{padding:18px 16px}
  .yab-install__grid > .yab-install__item{flex:0 0 70% !important;margin-top:0 !important}
  .yab-install__item figure{aspect-ratio:4/3.6 !important}
  .yab-install__cap h3{font-size:15px}
  .yab-install__cap p{font-size:13px}
}

/* 2026-10-16 r3：制造流程与安装交付之间只留约 120–160px */
.ya-about .yab-mfg{padding-bottom:clamp(48px,5vw,72px)}
.ya-about .yab-install{padding-top:clamp(48px,5vw,80px)}

@media (max-width:767px){.yab-arc__now{font-size:14px}.yab-arc__now b{font-size:11px}}