/* =====================================================================
   about.html only. Uses the kit's tokens; adds: the banner with a photograph on a plate, the six machine plates, the ticked-off "why us" list.
   ===================================================================== */

/* ---- banner: copy + photograph on a plate ---- */
.ab-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.ab-copy{display:grid;gap:clamp(16px,2vw,24px);justify-items:start;min-width:0}
.ab-fig{min-width:0;margin:0;position:relative}
/* the photograph is 382 x 510: the plate is sized so that it can show at (never above) its real pixels */
.ab-fig .plate{width:100%;aspect-ratio:1/1.2}
.ab-fig .plate-photo img{max-width:calc(100% - 56px);max-height:calc(100% - 72px)}
.ab-fig .tb{grid-template-columns:auto minmax(0,1fr)}
@media (max-width:899px){
  .ab-hero{grid-template-columns:minmax(0,1fr)}
  /* stacked under the copy: the plate is centred in the column (it was pushed to one side, leaving a dead strip beside it on a tablet) */
  .ab-fig{width:min(100%,440px);margin-inline:auto}
  .ab-fig .plate{aspect-ratio:.74}
}

/* ---- the six machines: hairline grid of plates ---- */
.ab-machines{--ab-line:var(--line-2)}
.feat-i.ab-m{padding:0;gap:0;align-content:stretch;grid-template-rows:auto 1fr}
.ab-pl{width:100%;aspect-ratio:4/3;border-bottom:1px solid var(--line-2)}
.ab-pl img{transition:transform .9s var(--ease)}
/* the slow zoom belongs to the plain photographs only. A cropped studio shot (.plate-crop) is centred by its own transform (translate(...)), and a
   scale() here would replace that translate and throw the machine out of its lit plate: it is left alone. Hover only where a pointer can really hover,
   so a tap on a phone does not leave a sticky zoomed card behind. */
.ab-m:focus-visible .ab-pl:not(.plate-crop) img{transform:scale(1.03)}
@media (hover:hover){.ab-m:hover .ab-pl:not(.plate-crop) img{transform:scale(1.03)}}
.ab-pl.plate-crop img{transition:none}
/* the borescope photo (1000 x 1250) fills its plate; it is only ever scaled DOWN, so it stays sharp */
.ab-pl.ab-cover img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:32% 24%;box-shadow:none}
.ab-pl.ab-cover::after{z-index:2}
.ab-m-b{display:grid;gap:8px;align-content:start;padding:22px clamp(20px,2vw,28px) 26px}
.ab-m-t{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ab-nm{direction:ltr;unicode-bidi:isolate;text-align:right;font-size:var(--fs-6);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ab-go{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;color:var(--cyan);transition:transform .4s var(--ease),background-color .25s,border-color .25s}
.ab-go .ic{width:18px;height:18px}
.ab-m:focus-visible .ab-go{transform:translateX(-4px);background:rgba(79,200,232,.1);border-color:var(--cyan)}
.ab-m:focus-visible .plate{--bc:#9be3f6}
@media (hover:hover){
  .ab-m:hover .ab-go{transform:translateX(-4px);background:rgba(79,200,232,.1);border-color:var(--cyan)}
  .ab-m:hover .plate{--bc:#9be3f6}
}
.ab-m:focus-visible{outline:none}
.ab-m:focus-visible::after{content:'';position:absolute;inset:0;z-index:6;border:2px solid var(--cyan);pointer-events:none}
/* phones: a compact row (thumbnail plate + name + line) so six machines do not become six screens */
@media (max-width:620px){
  .feat-i.ab-m{grid-template-columns:128px minmax(0,1fr);grid-template-rows:auto;align-items:stretch}
  .ab-pl{aspect-ratio:1/1;border-bottom:0;border-inline-end:1px solid var(--line-2);--bs:9px}
  .ab-pl::after,.ab-pl .plate-x,.ab-pl .plate-idx{display:none}
  .ab-pl img{max-width:calc(100% - 16px);max-height:calc(100% - 16px)}
  .ab-pl.plate-photo img{max-width:calc(100% - 14px);max-height:calc(100% - 14px)}
  .ab-pl.ab-cover img{max-width:none;max-height:none}
  .ab-m-b{align-content:center;padding:16px 16px 16px 14px}
  .ab-nm{font-size:19px}
  .ab-go{width:34px;height:34px}
}

/* ---- why us: each item is ticked off, the way a report is ---- */
.ab-tick{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line-c);background:rgba(79,200,232,.06);color:var(--cyan)}
.ab-tick svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ab-tick path{stroke-dasharray:1;stroke-dashoffset:0}
html.js .ab-why .feat-i.rv:not(.in) .ab-tick path{stroke-dashoffset:1}
html.js .ab-why .feat-i.rv.in .ab-tick path{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease-io) calc(var(--d,0s) + .5s)}
html.js .ab-why .feat-i.rv:not(.in) .ab-tick{border-color:var(--line-2);background:transparent}
html.js .ab-why .feat-i.rv.in .ab-tick{transition:border-color .5s calc(var(--d,0s) + .9s),background-color .5s calc(var(--d,0s) + .9s)}
html.rv-all .ab-why .ab-tick path{stroke-dashoffset:0!important}
@media (prefers-reduced-motion:reduce){
  html.js .ab-why .feat-i.rv:not(.in) .ab-tick path{stroke-dashoffset:0}
  html.js .ab-why .feat-i.rv:not(.in) .ab-tick{border-color:var(--line-c);background:rgba(79,200,232,.06)}
}

/* the photograph is "read" once, like a scanned drawing (the same scan line as the equipment pages; off with reduced motion) */
html.js .ab-fig.in .eq-scan::before{animation:scan 2s var(--ease-io) .7s 1 both}