/* ==========================================================================
   Parak Mahan Chemi — Demo 3 · pages-b.css
   Page-specific components for: about.html · industries.html · industry.html · gallery.html
   Load AFTER style.css and pages.css. Uses only tokens defined on :root in style.css.
   --------------------------------------------------------------------------
   1  .page-hero--aside  (text hero + decorative end column: .icon-matrix / .hero-mosaic)
   2  About: .story, .timeline, .facility/.collage/.spec-list, .qhse-card, .team-card/.team-avatar
   3  Industries: .ind-card(--compact), .grade-cell
   4  Industry: .reaction, .advice-card, .case, .faq-split, .support-card
   5  Gallery: .gal/.gal__item(--wide/--tall/--big), .video
   ========================================================================== */

/* ---------- Shared helpers ---------- */
.section-head__action { justify-self: start; }
@media (min-width: 900px) { .section-head__action { justify-self: end; } }
.check-list { display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; color: var(--ink-2); line-height: 1.8; }
.check-list svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--success); margin-block-start: 4px; }
.num-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ==========================================================================
   1. Page hero with aside visual
   ========================================================================== */
.hero-aside { display: none; }
@media (min-width: 900px) {
  .page-hero--aside .page-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .hero-aside { display: block; position: relative; }
}

/* Industry icon matrix (industries.html) */
.icon-matrix {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l);
}
.icon-matrix .icon-matrix__head {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; background: var(--surface); font-size: .75rem; color: var(--muted); aspect-ratio: auto; text-align: start;
}
.icon-matrix .icon-matrix__head:hover { background: var(--surface); }
.icon-matrix .icon-matrix__head b { color: var(--ink); font-weight: 600; font-size: .8125rem; }
.icon-matrix__head .ltr { letter-spacing: .14em; font-size: .6875rem; }
.icon-matrix li {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 8px; aspect-ratio: 1;
  padding: 10px; background: var(--surface); text-align: center; font-size: .75rem; line-height: 1.5; color: var(--ink-2); font-weight: 500;
  transition: background-color .3s;
}
.icon-matrix li svg { inline-size: 46px; block-size: 46px; color: var(--cobalt); transition: transform .5s var(--ease); }
.icon-matrix li:hover { background: var(--ice-50); }
.icon-matrix li:hover svg { transform: translateY(-3px); }
.icon-matrix li.is-on { background: var(--cobalt); color: #fff; }
.icon-matrix li.is-on svg { color: #fff; }
.icon-matrix li.is-on::after {
  content: ""; position: absolute; inset-block-start: 12px; inset-inline-end: 12px; inline-size: 7px; block-size: 7px; border-radius: 2px;
  background: var(--orange); transform: rotate(45deg);
}

/* Photo mosaic (gallery.html) */
.hero-mosaic { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 5 / 4; }
.hero-mosaic .ph { margin: 0; border-radius: var(--radius-l); box-shadow: var(--shadow); }
.hero-mosaic .ph:first-child { grid-row: 1 / span 2; box-shadow: var(--shadow-l); }
.hero-mosaic .ph:first-child::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .2) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .2) 1px, transparent 1px);
  background-size: 44px 44px;
}
.hero-mosaic .photo-chip { inset-block-start: auto; inset-block-end: 14px; }

/* ==========================================================================
   2. About
   ========================================================================== */
/* Story */
.story { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .story { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.story__visual { position: relative; padding-block-end: 40px; padding-inline-end: clamp(20px, 5vw, 64px); }
.story__photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
@media (min-width: 1000px) { .story__photo { aspect-ratio: 4 / 4.6; } }
.story__photo img { object-position: 50% 60%; }
.story__inset {
  position: absolute; z-index: 3; inset-block-end: 0; inset-inline-end: 0; inline-size: clamp(150px, 38%, 250px);
  padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-l);
}
.story__inset .ph { aspect-ratio: 4 / 3; border-radius: 13px; }
.story__inset p { display: flex; justify-content: space-between; gap: 8px; padding: 8px 8px 4px; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.story__inset b { color: var(--ink); font-weight: 600; }
.story__year {
  position: absolute; z-index: 3; inset-block-start: 22px; inset-inline-start: -10px;
  display: grid; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #C9D3E1; line-height: 1.4; box-shadow: var(--shadow);
}
.story__year b { color: #fff; font-size: 1.5rem; }
.story__year span { font-size: .75rem; }
@media (max-width: 479.98px) { .story__year { inset-inline-start: 10px; inset-block-start: 10px; padding: 8px 14px; } .story__year b { font-size: 1.125rem; } }

.story__text { display: grid; gap: 18px; }
.story__text > p { font-size: clamp(1rem, .97rem + .15vw, 1.0625rem); line-height: 2.05; }
.story__text > p:first-of-type { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--ink); line-height: 1.95; }
.mission { display: grid; gap: 14px; margin-block-start: 8px; }
@media (min-width: 560px) { .mission { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mission__card { position: relative; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.mission__card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 22px; inline-size: 28px; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--cobalt); }
.mission__card:nth-child(2)::before { background: var(--orange); }
.mission__card h3 { font-size: 1rem; margin-block-end: 6px; display: flex; align-items: center; gap: 8px; }
.mission__card h3 small { font-size: .6875rem; color: var(--muted); letter-spacing: .14em; font-weight: 500; direction: ltr; margin-inline-start: auto; }
.mission__card p { font-size: .9063rem; color: var(--muted); line-height: 1.85; }
.story__sign { display: flex; align-items: center; gap: 14px; padding-block-start: 18px; border-block-start: 1px dashed var(--line-strong); font-size: .8125rem; color: var(--muted); line-height: 1.6; }
.story__sign svg { inline-size: 110px; block-size: 32px; color: var(--cobalt-700); flex: none; }
.story__sign b { display: block; color: var(--ink); font-weight: 600; font-size: .875rem; }

.about-stats { margin-block-start: clamp(56px, 7vw, 104px); }

/* Timeline — vertical on mobile/tablet, horizontal ≥1200px */
.timeline { position: relative; display: grid; }
.timeline__item { position: relative; display: grid; gap: 8px; padding-inline-start: 48px; padding-block-end: 28px; }
.timeline__item::before {
  content: ""; position: absolute; inset-inline-start: 11px; inset-block-start: 14px; inset-block-end: -14px; inline-size: 2px;
  background: var(--cobalt-200);
}
.timeline__item:last-child { padding-block-end: 0; }
.timeline__item:last-child::before { display: none; }
.timeline__node { position: absolute; inset-inline-start: 0; inset-block-start: 6px; inline-size: 24px; block-size: 24px; }
.timeline__node::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: var(--cobalt); border: 2px solid var(--cobalt); box-shadow: inset 0 0 0 5px var(--surface);
}
.timeline__item.is-now .timeline__node::after { background: var(--orange); border-color: var(--orange); box-shadow: inset 0 0 0 5px var(--surface), 0 0 0 5px rgba(255, 107, 44, .18); }
.timeline__year { display: flex; align-items: baseline; gap: 10px; line-height: 1.3; }
.timeline__year b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); color: var(--ink); font-weight: 700; }
.timeline__year span { font-size: .75rem; color: var(--muted); letter-spacing: .08em; direction: ltr; }
.timeline__card {
  position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s, box-shadow .4s var(--ease), transform .4s var(--ease);
}
.timeline__card:hover { border-color: var(--cobalt-200); box-shadow: var(--shadow); transform: translateY(-3px); }
.timeline__card .chip { justify-self: start; }
.timeline__card h3 { font-size: 1rem; line-height: 1.55; }
.timeline__card p { font-size: .875rem; color: var(--muted); line-height: 1.85; }
.timeline__item.is-now .timeline__card { border-color: var(--cobalt-100); background: linear-gradient(180deg, var(--surface), var(--cobalt-50)); }
@media (min-width: 720px) and (max-width: 1199.98px) {
  .timeline__item { grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .timeline__year { flex-direction: column; gap: 0; }
}
@media (min-width: 1200px) {
  .timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .timeline__item { display: flex; flex-direction: column; gap: 0; padding: 0; }
  .timeline__item::before { display: none; }
  .timeline__year { order: 1; flex-direction: column; gap: 0; }
  .timeline__node { order: 2; position: relative; inset: auto; inline-size: 100%; margin-block: 18px 20px; }
  .timeline__node::before {
    content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: calc(100% + 16px); block-size: 2px; margin-block-start: -1px;
    background: var(--cobalt-200);
  }
  .timeline__item:last-child .timeline__node::before { inline-size: 100%; background: linear-gradient(to left, var(--cobalt-200), rgba(185, 203, 248, 0)); }
  .timeline__node::after { z-index: 1; }
  .timeline__card { order: 3; flex: 1; }
}

/* Values: reuse .feature inside .card-grid--4 */
.values .feature { align-content: start; }
.values .feature__icon svg { inline-size: 30px; block-size: 30px; }

/* Facility */
.facility { display: grid; gap: clamp(24px, 3vw, 40px); align-items: stretch; }
@media (min-width: 1000px) { .facility { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.collage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: repeat(2, 170px); gap: 12px; }
@media (min-width: 640px) { .collage { grid-template-rows: repeat(2, 230px); gap: 16px; } }
@media (min-width: 1000px) { .collage { grid-template-rows: repeat(2, minmax(0, 1fr)); min-block-size: 520px; } }
.collage .ph { margin: 0; border-radius: var(--radius-l); }
.collage .ph:first-child { grid-row: 1 / span 2; }
.collage .ph:hover img { transform: scale(1.05); }
@media (max-width: 479.98px) { .collage .photo-chip { font-size: .6875rem; padding: 4px 10px; inset-block-start: 10px; inset-inline-start: 10px; max-inline-size: calc(100% - 20px); } }

.facility__panel { display: grid; align-content: start; gap: 18px; padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
.facility__panel .specs { margin: 0; }
.facility__panel h3 { font-size: 1.125rem; }
.facility__panel > p { font-size: .9063rem; color: var(--muted); }
.spec-list { display: grid; }
.spec-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-block: 14px; border-block-start: 1px solid var(--line); }
.spec-list li:last-child { padding-block-end: 0; }
.spec-list__ico { inline-size: 40px; block-size: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); }
.spec-list__ico svg { inline-size: 22px; block-size: 22px; }
.spec-list b { display: block; color: var(--ink); font-weight: 600; font-size: .9375rem; line-height: 1.6; }
.spec-list small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.spec-list__v { font-size: .8125rem; font-weight: 700; color: var(--cobalt-700); background: var(--ice-100); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
@media (max-width: 419.98px) { .spec-list li { grid-template-columns: auto minmax(0, 1fr); } .spec-list__v { grid-column: 2; justify-self: start; } }

/* Quality & HSE */
.qhse { display: grid; gap: 24px; }
@media (min-width: 900px) { .qhse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qhse-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.qhse-card:hover { box-shadow: var(--shadow-l); transform: translateY(-4px); }
.qhse-card__media { aspect-ratio: 16 / 8; border-block-end: 1px solid var(--line); }
.qhse-card:hover .qhse-card__media img { transform: scale(1.04); }
.qhse-card__body { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); }
.qhse-card__head { display: flex; align-items: center; gap: 14px; }
.qhse-card__head .feature__icon { margin: 0; inline-size: 48px; block-size: 48px; }
.qhse-card__head .feature__icon svg { inline-size: 26px; block-size: 26px; }
.qhse-card h3 { font-size: 1.1875rem; }
.qhse-card__latin { display: block; font-size: .6875rem; letter-spacing: .14em; color: var(--muted); font-weight: 500; direction: ltr; text-align: end; line-height: 1.4; }
.qhse-card__body > p { color: var(--muted); font-size: .9375rem; }
.qhse-card__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: 6px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qhse-card__kpis div { padding: 12px 14px; display: grid; line-height: 1.5; }
.qhse-card__kpis div + div { border-inline-start: 1px solid var(--line); }
.qhse-card__kpis b { color: var(--ink); font-size: 1.125rem; }
.qhse-card__kpis span { font-size: .75rem; color: var(--muted); }
@media (max-width: 419.98px) { .qhse-card__kpis div { padding: 10px; } .qhse-card__kpis b { font-size: 1rem; } }

/* Team */
.team-card {
  position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 24px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  transition: border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.team-card:hover { border-color: var(--cobalt-200); transform: translateY(-4px); box-shadow: var(--shadow); }
.team-avatar {
  position: relative; inline-size: 68px; block-size: 76px; display: grid; place-items: center; margin-block-end: 6px;
  font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: 0; line-height: 1;
}
.team-avatar::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(150deg, var(--cobalt-300) 0%, var(--cobalt) 45%, var(--cobalt-800) 100%);
}
.team-avatar::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-end: -2px; inline-size: 10px; block-size: 10px; border-radius: 2px;
  background: var(--orange); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--surface);
}
.team-avatar span { position: relative; z-index: 1; }
.team-avatar--ink::before { background: linear-gradient(150deg, #56667C 0%, var(--ink) 70%); }
.team-avatar--ice { color: var(--cobalt-700); }
.team-avatar--ice::before { background: linear-gradient(150deg, var(--surface) 0%, var(--cobalt-100) 100%); box-shadow: inset 0 0 0 1px var(--cobalt-200); }
.team-card h3 { font-size: 1.0625rem; }
.team-card__role { display: block; font-size: .8125rem; color: var(--cobalt-700); font-weight: 600; margin-block-start: 2px; }
.team-card p { font-size: .875rem; color: var(--muted); line-height: 1.85; }
.team-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 4px; padding-block-start: 14px; border-block-start: 1px solid var(--line); font-size: .75rem; color: var(--muted); }
.team-card__foot a { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); border: 1px solid var(--line); transition: background-color .25s, color .25s, border-color .25s; }
.team-card__foot a:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.team-card__foot svg { inline-size: 16px; block-size: 16px; }

/* ==========================================================================
   3. Industries
   ========================================================================== */
.ind-card {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
.ind-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: var(--cobalt-100); }
.ind-card:has(.ind-card__link:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 3px; }
.ind-card__media { aspect-ratio: 16 / 10; }
.ind-card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ind-card:hover .ind-card__media img { transform: scale(1.06); }
.ind-card__tag {
  position: absolute; z-index: 3; inset-block-start: 14px; inset-inline-end: 14px; direction: ltr;
  padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .625rem; letter-spacing: .14em; font-weight: 600; color: var(--ink-2); line-height: 1.5;
}
.ind-card__icon {
  position: relative; z-index: 3; inline-size: 54px; block-size: 54px; padding: 9px; margin-block: -28px 0; margin-inline-start: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--cobalt);
  box-shadow: 0 10px 22px -12px rgba(15, 42, 122, .4); transition: transform .5s var(--ease), background-color .3s, color .3s;
}
.ind-card:hover .ind-card__icon { transform: translateY(-4px); background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
.ind-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 14px 22px 20px; }
.ind-card h3 { font-size: 1.125rem; line-height: 1.5; }
.ind-card__link { transition: color .2s; }
.ind-card__link::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.ind-card__link:focus-visible { outline: none; }
.ind-card:hover .ind-card__link { color: var(--cobalt-700); }
.ind-card__desc { font-size: .875rem; color: var(--muted); line-height: 1.85; }
.ind-card__uses { display: grid; gap: 6px; padding-block: 12px 2px; border-block-start: 1px dashed var(--line-strong); }
.ind-card__uses li { position: relative; padding-inline-start: 18px; font-size: .8438rem; color: var(--ink-2); line-height: 1.75; }
.ind-card__uses li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .72em; inline-size: 6px; block-size: 6px; border-radius: 1.5px; background: var(--cobalt); transform: rotate(45deg); }
.ind-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: auto; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.ind-card__go { inline-size: 36px; block-size: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt-50); color: var(--cobalt); transition: background-color .25s, color .25s; }
.ind-card__go svg { inline-size: 18px; block-size: 18px; transition: transform .3s var(--ease); }
.ind-card:hover .ind-card__go { background: var(--cobalt); color: #fff; }
.ind-card:hover .ind-card__go svg { transform: translateX(-3px); }
.ind-card--compact .ind-card__media { aspect-ratio: 16 / 9; }
.ind-card--compact .ind-card__body { gap: 8px; }

/* Consumption table extras */
.guide-table .analysis td { vertical-align: top; }
.guide-table .analysis tbody th { min-inline-size: 180px; }
.guide-table .param { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.guide-table .param svg { grid-row: 1 / span 2; inline-size: 34px; block-size: 34px; padding: 5px; border-radius: 10px; background: var(--cobalt-50); color: var(--cobalt); }
.guide-table .param__f { text-align: end; font-size: .6875rem; letter-spacing: .08em; }
.guide-table .use { color: var(--ink-2); font-size: .875rem; line-height: 1.8; }
.grade-cell { display: flex; flex-wrap: wrap; gap: 6px; }
.guide-table .pack { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.table-card__foot { display: flex; gap: 10px; align-items: flex-start; padding: 14px 24px; border-block-start: 1px solid var(--line); background: var(--ice-50); font-size: .8125rem; color: var(--muted); line-height: 1.8; }
.table-card__foot svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--cobalt); margin-block-start: 3px; }
@media (max-width: 719.98px) {
  .guide-table .analysis td { align-items: center; text-align: end; }
  .guide-table .analysis td.use { display: grid; gap: 2px; text-align: start; }
  .guide-table .grade-cell { justify-content: flex-end; }
  .guide-table .analysis tbody th { min-inline-size: 0; }
}

/* ==========================================================================
   4. Industry (single)
   ========================================================================== */
.role { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .role { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.role .prose { max-inline-size: none; }

.reaction { position: relative; padding: clamp(22px, 3vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow); overflow: hidden; }
.reaction::after { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 4px; background: linear-gradient(90deg, var(--cobalt) 0 70%, var(--orange) 70% 100%); }
.reaction__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-block-end: 16px; border-block-end: 1px dashed var(--line-strong); }
.reaction__head h3 { font-size: 1.125rem; }
.reaction__head p { font-size: .75rem; color: var(--muted); direction: ltr; text-align: end; letter-spacing: .06em; }
.reaction__head .chip { flex: none; }
.reaction__eq {
  direction: ltr; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px 6px;
  margin-block: 22px 18px; padding: 22px 14px; border-radius: var(--radius); background: var(--ice-50); border: 1px solid var(--line);
  background-image: radial-gradient(circle, var(--ice-300) 1px, transparent 1.3px); background-size: 14px 14px;
}
.reaction__term { display: grid; justify-items: center; gap: 4px; text-align: center; }
.reaction__term b { font-size: clamp(.875rem, .8rem + .3vw, 1rem); font-weight: 700; color: var(--ink); white-space: nowrap; padding: 5px 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
.reaction__term.is-naoh b { color: #fff; background: var(--cobalt); border-color: var(--cobalt); }
.reaction__term.is-soap b { color: var(--cobalt-700); border-color: var(--cobalt-200); }
.reaction__term span { direction: rtl; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.reaction__op { align-self: flex-start; padding-block-start: 8px; font-size: 1.125rem; font-weight: 700; color: var(--muted); line-height: 1.5; }
.reaction__op--arrow { color: var(--orange-ink); display: grid; justify-items: center; gap: 0; font-size: .6875rem; padding-block-start: 4px; }
.reaction__op--arrow svg { inline-size: 40px; block-size: 20px; transform: scaleX(-1); color: var(--orange); }
.reaction .meta { margin-block-start: 0; }

.advice-card {
  position: relative; display: flex; flex-direction: column; gap: 16px; overflow: hidden; isolation: isolate;
  padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-l); background: var(--ink); color: #C9D3E1;
}
.advice-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 70%); mask-image: linear-gradient(200deg, #000, transparent 70%);
}
.advice-card::after { content: ""; position: absolute; z-index: -1; inset-block-end: -30%; inset-inline-end: -30%; inline-size: 80%; aspect-ratio: 1; background: radial-gradient(circle, rgba(31, 79, 216, .55), transparent 65%); }
.advice-card__icon { inline-size: 52px; block-size: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.advice-card__icon svg { inline-size: 28px; block-size: 28px; }
.advice-card h3 { color: #fff; font-size: 1.3125rem; }
.advice-card p { font-size: .9063rem; line-height: 1.9; }
.advice-card .check-list li { color: #DCE5FC; font-size: .875rem; }
.advice-card .check-list svg { color: #34D399; }
.advice-card .btn { margin-block-start: auto; }

.tips { display: grid; gap: 14px; }
.tips .panel h3 { margin-block-end: 10px; }
.tip-list { display: grid; }
.tip-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding-block: 12px; border-block-start: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); line-height: 1.85; }
.tip-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.tip-list li:last-child { padding-block-end: 0; }
.tip-list b { color: var(--ink); font-weight: 600; }
.tip-list__n { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: var(--cobalt); background: var(--cobalt-50); border: 1px solid var(--cobalt-100); margin-block-start: 2px; }
.tips .prose__note { font-size: .875rem; }

.case { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 1000px) { .case { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
.case__media { margin: 0; min-block-size: 240px; }
@media (min-width: 1000px) { .case__media { min-block-size: 100%; } }
.case__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .16) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 40px 40px;
}
.case__body { display: grid; gap: 20px; padding: clamp(24px, 3.6vw, 48px); }
.case__body h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5625rem); line-height: 1.5; }
.case__cols { display: grid; gap: 16px; }
@media (min-width: 640px) { .case__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.case__cols h4 { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--ink); margin-block-end: 6px; }
.case__cols h4::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--cobalt); transform: rotate(45deg); flex: none; }
.case__cols div:nth-child(2) h4::before { background: var(--orange); }
.case__cols p { font-size: .9063rem; color: var(--muted); line-height: 1.9; }
.case__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--ice-50); }
.case__metrics div { position: relative; display: grid; gap: 2px; padding: 16px 18px; line-height: 1.4; }
.case__metrics div + div { border-inline-start: 1px solid var(--line); }
.case__metrics b { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); color: var(--cobalt); font-weight: 700; white-space: nowrap; }
.case__metrics div:nth-child(3) b { color: var(--ink); }
.case__metrics span { font-size: .75rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 479.98px) { .case__metrics div { padding: 12px 10px; } .case__metrics b { font-size: 1.25rem; } }
.case__quote { margin: 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--orange); color: var(--ink); font-size: .9688rem; font-weight: 500; line-height: 1.95; }
.case__quote cite { display: block; margin-block-start: 6px; font-size: .75rem; color: var(--muted); font-style: normal; font-weight: 400; }

.faq-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) {
  .faq-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .faq-split__side { position: sticky; inset-block-start: calc(var(--header-h) + 24px); }
}
.faq-split__side .section-head { margin-block-end: 28px; }
.support-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.support-card__ico { inline-size: 46px; block-size: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--orange-50); color: var(--orange-ink); }
.support-card__ico svg { inline-size: 22px; block-size: 22px; }
.support-card small { display: block; font-size: .75rem; color: var(--muted); line-height: 1.6; }
.support-card a { font-weight: 700; color: var(--ink); font-size: 1.0625rem; }
.support-card a:hover { color: var(--cobalt); }

/* ==========================================================================
   5. Gallery
   ========================================================================== */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; gap: 10px; }
@media (min-width: 640px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 14px; } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 17.5vw, 232px); gap: 16px; } }
.gal__item { min-inline-size: 0; }
.gal__item--wide { grid-column: span 2; }
.gal__item--tall { grid-row: span 2; }
.gal__item--big { grid-column: span 2; grid-row: span 2; }
@media (min-width: 640px) and (max-width: 999.98px) { .gal__item--wide:last-child { grid-column: span 3; } }

.gal__link { block-size: 100%; border-radius: var(--radius); }
@media (min-width: 640px) { .gal__link { border-radius: var(--radius-l); } }
.gal__link::before {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0); border-radius: 12px; transition: border-color .4s var(--ease);
}
.gal__link:hover::before, .gal__link:focus-visible::before { border-color: rgba(255, 255, 255, .55); }
.gal__link:hover img, .gal__link:focus-visible img { transform: scale(1.06); }
.gal__cap {
  position: absolute; z-index: 3; inset-inline: 0; inset-block-end: 0; display: grid; gap: 0;
  padding: 44px clamp(12px, 2vw, 20px) clamp(10px, 1.6vw, 16px);
  background: linear-gradient(to top, rgba(11, 21, 36, .82), rgba(11, 21, 36, 0));
  color: #DCE5FC; font-size: .75rem; line-height: 1.6;
}
.gal__cap b { color: #fff; font-size: clamp(.8125rem, .76rem + .25vw, 1rem); font-weight: 600; line-height: 1.5; }
.gal__cap span { display: inline-flex; align-items: center; gap: 6px; }
.gal__cap span::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--orange); flex: none; }
@media (hover: hover) and (min-width: 640px) {
  .gal__cap span { max-block-size: 0; opacity: 0; overflow: hidden; transition: max-block-size .45s var(--ease), opacity .35s; }
  .gal__link:hover .gal__cap span, .gal__link:focus-visible .gal__cap span { max-block-size: 2em; opacity: 1; }
}
@media (max-width: 479.98px) { .gal__cap span { display: none; } .gal__cap { padding-block-start: 30px; } }
.gal__zoom {
  position: absolute; z-index: 3; inset-block-start: 14px; inset-inline-end: 14px; inline-size: 38px; block-size: 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--cobalt); box-shadow: 0 6px 18px -8px rgba(15, 27, 45, .45);
  opacity: 0; transform: scale(.85); transition: opacity .3s, transform .4s var(--ease);
}
.gal__zoom svg { inline-size: 18px; block-size: 18px; }
.gal__link:hover .gal__zoom, .gal__link:focus-visible .gal__zoom { opacity: 1; transform: none; }
.gal__link:focus-visible { outline-offset: 3px; }
.gal-empty[hidden] { display: none; }

/* Video placeholder */
.video { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 1000px) { .video { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: 32px; } }
.video__stage { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.video__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 21, 36, .78), rgba(11, 21, 36, .1) 55%, rgba(11, 21, 36, .25));
}
.video__play {
  position: absolute; z-index: 3; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(50%, -50%);
  inline-size: clamp(68px, 9vw, 96px); block-size: clamp(68px, 9vw, 96px); border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--orange); color: var(--ink);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .18), 0 20px 40px -12px rgba(0, 0, 0, .5);
  transition: transform .35s var(--ease), background-color .25s, box-shadow .35s var(--ease);
}
.video__play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); animation: vpulse 2.4s ease-out infinite; }
@keyframes vpulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.video__play svg { inline-size: 36%; block-size: 36%; translate: 7% 0; }
.video__play:hover { background: var(--orange-600); transform: translate(50%, -50%) scale(1.06); }
.video__play:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.video__meta { position: absolute; z-index: 3; inset-inline: 0; inset-block-end: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: clamp(14px, 2.4vw, 28px); color: #DCE5FC; }
.video__meta h3 { color: #fff; font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem); line-height: 1.45; }
.video__meta p { font-size: .8125rem; }
.video__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.video__badges span { direction: ltr; font-size: .6875rem; font-weight: 600; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.video__note { position: absolute; z-index: 4; inset-block-start: 14px; inset-inline-start: 14px; max-inline-size: calc(100% - 28px); }
.video__note[hidden] { display: none; }
@media (max-width: 479.98px) { .video__meta p, .video__badges { display: none; } }

.chapters { display: flex; flex-direction: column; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); }
.chapters h3 { font-size: 1rem; margin-block-end: 10px; display: flex; align-items: center; gap: 10px; }
.chapters h3::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--cobalt); transform: rotate(45deg); }
.chapters ol { display: grid; }
.chapters li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-block: 12px; border-block-start: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); line-height: 1.7; }
.chapters li:first-of-type { border-block-start: 0; }
.chapters time { direction: ltr; font-size: .75rem; font-weight: 600; color: var(--cobalt-700); background: var(--ice-100); border-radius: 6px; padding: 1px 8px; }
.chapters__foot { margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px dashed var(--line-strong); font-size: .8125rem; color: var(--muted); line-height: 1.8; }

@media (prefers-reduced-motion: reduce) {
  .video__play::before { animation: none; }
}

/* Impurity-sensitivity meter (industries sel-guide table) */
.sens { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }
.sens__bars { display: inline-flex; gap: 3px; direction: ltr; }
.sens__bars i { inline-size: 6px; block-size: 14px; border-radius: 2px; background: var(--ice-300); }
.sens__bars i:nth-child(2) { block-size: 14px; }
.sens[data-level="1"] .sens__bars i:nth-child(-n+1),
.sens[data-level="2"] .sens__bars i:nth-child(-n+2),
.sens[data-level="3"] .sens__bars i:nth-child(-n+3) { background: var(--cobalt); }
.sens[data-level="3"] .sens__bars i:nth-child(3) { background: var(--orange); }

/* Card lists (li wrappers stretch their card) */
.ind-grid > li { display: flex; min-inline-size: 0; }
.ind-grid > li > * { flex: 1 1 auto; min-inline-size: 0; }

/* Guide layout: full-width table + download row */
.sel-guide { display: grid; gap: 16px; }
@media (min-width: 640px) { .sel-guide__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sel-guide__aside { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); } }
.sel-guide__aside .dl-intro { display: grid; align-content: center; }
.guide-table .grade-cell { flex-wrap: nowrap; }

/* Industry: tips row under dosage table */
@media (min-width: 900px) { .tips { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); align-items: stretch; } }
.tips .prose__note { align-self: stretch; align-items: flex-start; }
.guide-table .num small { font-size: .6875rem; color: var(--muted); font-weight: 500; }

/* Video caption text */
.video__title { display: block; color: #fff; font-weight: 700; font-size: clamp(1.0625rem, .95rem + .6vw, 1.375rem); line-height: 1.45; }
.video__sub { display: block; font-size: .8125rem; }
@media (max-width: 479.98px) { .video__sub { display: none; } }

/* Reaction: reactants row, downward arrow, products row */
.reaction__eq { flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 6px; }
.reaction__side { display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap; }
.reaction__op--arrow { display: flex; align-self: center; align-items: center; gap: 6px; padding: 0; font-size: .75rem; font-style: normal; }
.reaction__op--arrow svg { inline-size: 22px; block-size: 22px; transform: rotate(-90deg); }
.reaction__op--arrow i { font-style: normal; }

/* ==========================================================================
   LTR (en/) adjustments for pages-b components — ltr.css loads after this file
   ========================================================================== */
[dir="ltr"] .ind-card:hover .ind-card__go svg { transform: scaleX(-1) translateX(-3px); }
[dir="ltr"] .reaction .reaction__op--arrow svg { transform: rotate(-90deg); }
[dir="ltr"] .video__play { transform: translate(-50%, -50%); }
[dir="ltr"] .video__play:hover { transform: translate(-50%, -50%) scale(1.06); }
[dir="ltr"] .timeline__item:last-child .timeline__node::before { background: linear-gradient(to right, var(--cobalt-200), rgba(185, 203, 248, 0)); }
[dir="ltr"] .reaction__head p, [dir="ltr"] .coa-doc__sub { text-align: start; }
.case__metrics b span { font-size: inherit; color: inherit; line-height: inherit; }