/* Beautech — page styles: About. Loaded after assets/site.css. */
.intro-split { display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items:start; }
.intro-split image-slot { width:100%; height:clamp(440px,42vw,580px); aspect-ratio:auto; }
/* The client asked for the brand-wall artwork here (20 Jul). It's a landscape
   graphic, not a photo, so it is set to `contain` on its own plate — cropping
   it to this tall slot would cut the wordmark off. */
.intro-split .im-art image-slot { height:clamp(300px,26vw,380px); background:var(--surface); border:1px solid var(--line); border-radius:4px; }
.intro-split p + p { margin-top: 16px; }
.intro-split .lead { color: var(--ink); }
@media(max-width:820px){ .intro-split{ grid-template-columns:1fr; } .intro-split .im{ max-width:440px; } }

.stats { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.stats .st { background:var(--surface-2); padding:32px 24px; }
.stats .st b { font-family:var(--f-display); font-weight:var(--fw-med); font-variant-numeric:tabular-nums; font-size: var(--ds-3xl); line-height: var(--lh-none); display:block; }
.stats .st span { font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-label); text-transform:uppercase; color:var(--muted); margin-top:8px; display:block; }
@media(max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } }

.why-split { display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--gap-lg); align-items:start; }
@media(max-width:820px){ .why-split{ grid-template-columns:1fr; } }
.why-split .wl-lead { color:var(--ink-soft); font-size: var(--fs-base); margin-top:20px; max-width:32ch; }
.why-list { border-top:1px solid var(--line); }
.why-item { display:grid; grid-template-columns:44px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line); align-items:start; transition: background var(--dur-slow),padding var(--dur-slow); }
.why-item:hover { background:var(--surface); padding-inline:16px; }
.why-item .wn { font-family:var(--f-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide); color:var(--accent); padding-top:6px; }
.why-item h4 { font-family:var(--f-display); font-weight: var(--fw-head); font-size: var(--ds-sm); line-height: var(--lh-heading); color:var(--ink); }
.why-item p { color:var(--ink-soft); font-size: var(--fs-base); margin-top:6px; max-width:56ch; }
.wl-photo{ margin-top:32px; }
.wl-photo image-slot{ width:100%; height:clamp(320px,30vw,460px); aspect-ratio:auto; }
/* The supplied filling-machine shot (25 Jul) is portrait; a centred cover would
   crop away the machine head and the operator's hands, which are the point of
   the photo. <image-slot fit="cover"> drives its own crop and ignores
   object-position, so assets/photo-filling-machine.jpg is pre-cropped to this
   slot's ~1.2:1 instead. */
@media(max-width:820px){ .wl-photo{ max-width:440px; } }

.values { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.val { background:var(--surface-2); padding:32px 24px; min-height:230px; }
.val .vi { width:40px;height:40px;color:var(--accent); }
.val h3 { font-family:var(--f-display); font-weight: var(--fw-head); font-size: var(--fs-xl); margin:20px 0 8px; }
.val p { font-size: var(--fs-base); color:var(--ink-soft); }
@media(max-width:820px){ .values{ grid-template-columns:1fr; } }

.cert-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg); align-items:center; }
.cert-list { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.cert-item { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:16px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); }
.cert-item .ci { width:30px;height:30px;color:var(--accent);flex:none; }
.cert-item h4 { font-weight:var(--fw-head); font-size: var(--fs-base); }
.cert-item p { font-size: var(--fs-sm); color:var(--muted); }
.cert-split image-slot { width:100%; height:clamp(420px,40vw,560px); aspect-ratio:auto; }
@media(max-width:820px){ .cert-split{ grid-template-columns:1fr; } }


.phi-split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--gap-lg); align-items:start; }
@media(max-width:820px){ .phi-split{ grid-template-columns:1fr; } }
.phi-split p + p{ margin-top:16px; }
.phi-split .tags{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px; }

.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.testi{ background:var(--surface-2); padding:32px 32px; display:flex; flex-direction:column; gap:16px; }
.testi .tq{ color:var(--ink-soft); font-size: var(--fs-base); line-height: var(--lh-body); }
.testi .tq::before, .testi .tq::after{ content:'"'; }
.testi .tav{ display:flex; align-items:center; gap:12px; }
.testi .tav img{ width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line);background:#fff; }
.testi .tname{ font-weight:var(--fw-head); font-size: var(--fs-base); color:var(--ink); }
.testi .trole{ font-family:var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform:uppercase; color:var(--muted); margin-top:2px; }
@media(max-width:760px){ .testi-grid{ grid-template-columns:1fr; } }