/* =============================================================
   FENVA PRECISION — Shared page composition
   Import AFTER fenva-fonts.css, fenva-tokens.css, fenva-components.css.
   Layout patterns reused across Home, Capability, Industry and
   content pages so individual pages stay lean.
   ============================================================= */

html { scroll-behavior: smooth; }
section[id], footer[id] { scroll-margin-top: 92px; }

/* ---- Section intro / heading blocks ---- */
.intro { max-width: 760px; display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-12); }
.intro h2 { color: inherit; }
.intro .lead { color: var(--fg-2); }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-12); }
.head-row .intro { margin-bottom: 0; }
.head-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--blue-600); white-space: nowrap; }
.head-link .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.head-link:hover { text-decoration: none; }
.head-link:hover .icon { transform: translateX(3px); }

/* ---- Generic grids ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 980px){ .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px){ .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px){ .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } }

/* ---- Sub-page hero (breadcrumb + variants) ---- */
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-inverse-dim); margin-bottom: var(--space-5); flex-wrap: wrap; }
.breadcrumb a { color: var(--fg-inverse-dim); }
.breadcrumb a:hover { color: #fff; text-decoration: none; }
.breadcrumb .sep { opacity: 0.45; }
.breadcrumb .here { color: #fff; }
.hero.subpage .container { padding-block: clamp(56px, 8vw, 104px); }
.hero.subpage .hero-grid { gap: var(--space-6); }
ul.hero-bullets { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
ul.hero-bullets li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--fg-inverse-dim); font-size: var(--text-lg); }
ul.hero-bullets li .icon { color: var(--accent-400); flex: none; margin-top: 4px; }

/* ---- Collapsible explainer ---- */
.explainer { display: flex; flex-direction: column; gap: var(--space-3); max-width: 880px; }
details.qa { border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-xs); }
details.qa > summary { cursor: pointer; list-style: none; padding: var(--space-5) var(--space-6); font-weight: var(--weight-semibold); color: var(--fg-1); font-size: var(--text-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary .chev { flex: none; color: var(--blue-500); transition: transform var(--dur) var(--ease-out); width: 20px; height: 20px; }
details.qa[open] > summary .chev { transform: rotate(180deg); }
details.qa .qa-body { padding: 0 var(--space-6) var(--space-6); }
details.qa .qa-body p { color: var(--fg-2); max-width: 72ch; }
details.qa .qa-body p + p { margin-top: var(--space-3); }
details.qa:hover { border-color: var(--slate-300); }

/* ---- Spec table note ---- */
.table-note { font-size: var(--text-sm); color: var(--fg-3); margin-top: var(--space-4); display: flex; gap: var(--space-2); align-items: flex-start; }
.table-note .icon { color: var(--accent-500); flex: none; margin-top: 1px; }
.spec-caption { text-align: left; padding: var(--space-4) var(--space-5); font-size: var(--text-xs); color: var(--fg-3); background: #fff; }

/* ---- Info / feature / material cards ---- */
.info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.info-card.lift:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--slate-300); }
.info-card .card-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--blue-50); color: var(--blue-500); flex: none; }
.info-card h3 { font-size: var(--text-h4); color: var(--fg-1); }
.info-card p { font-size: var(--text-base); }
.info-card ul.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.info-card ul.bullets li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--fg-2); }
.info-card ul.bullets li .icon { color: var(--blue-500); flex: none; width: 16px; height: 16px; margin-top: 4px; }
.info-card ul.bullets li strong { color: var(--fg-1); font-weight: var(--weight-semibold); }
.info-card .card-link { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--blue-600); padding-top: var(--space-2); }
.info-card .card-link .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.info-card.lift:hover .card-link .icon { transform: translateX(3px); }

/* labelled key/value lines inside a card (e.g. finish appearance/best-for) */
.kv-list { display: flex; flex-direction: column; gap: var(--space-3); }
.kv { display: grid; grid-template-columns: 104px 1fr; gap: var(--space-3); align-items: baseline; }
.kv .k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); }
.kv .v { font-size: var(--text-sm); color: var(--fg-2); }
.kv .v.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1,"zero" 1; }
@media (max-width: 420px){ .kv { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Media card (image + body) ---- */
.media-card { display: grid; grid-template-columns: 0.85fr 1.15fr; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.media-card.flip { grid-template-columns: 1.15fr 0.85fr; }
.media-card .mc-img { background: var(--slate-100); overflow: hidden; min-height: 260px; }
.media-card .mc-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95); }
.media-card .mc-body { padding: var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; }
.media-card .mc-body h3 { font-size: var(--text-h3); color: var(--fg-1); }
.media-card .mc-body p { font-size: var(--text-base); max-width: 58ch; }
.media-card .card-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--blue-600); margin-top: var(--space-2); }
.media-card .card-link .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.media-card:hover .card-link .icon { transform: translateX(3px); }
@media (max-width: 760px){ .media-card, .media-card.flip { grid-template-columns: 1fr; } .media-card .mc-img { min-height: 200px; aspect-ratio: 16/9; order: -1; } .media-card .mc-body { padding: var(--space-8); } }

/* ---- Service chip row ---- */
.service-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.service-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; font-weight: var(--weight-medium); color: var(--fg-1); font-size: var(--text-base); box-shadow: var(--shadow-xs); }
.service-chip .icon { color: var(--blue-500); width: 18px; height: 18px; flex: none; }

/* ---- Feature split (text + callout) ---- */
.feature-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; }
@media (max-width: 880px){ .feature-split { grid-template-columns: 1fr; gap: var(--space-8); } }
.spec-callout { background: var(--bg-navy); color: #fff; border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-lg); }
.spec-callout .sc-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-400); margin-bottom: var(--space-5); }
.spec-callout .sc-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-navy); }
.spec-callout .sc-row:last-of-type { border-bottom: none; }
.spec-callout .sc-k { color: var(--fg-inverse-dim); font-size: var(--text-sm); }
.spec-callout .sc-v { font-family: var(--font-mono); font-feature-settings: "tnum" 1,"zero" 1; color: #fff; font-size: var(--text-lg); text-align: right; }
.spec-callout .sc-note { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--fg-inverse-dim); display: flex; gap: var(--space-2); align-items: flex-start; }
.spec-callout .sc-note .icon { color: var(--accent-400); flex: none; margin-top: 1px; }

/* ---- Feature trio ---- */
.feature-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 760px){ .feature-trio { grid-template-columns: 1fr; } }
.qfeat { display: flex; flex-direction: column; gap: var(--space-3); }
.qfeat .qicon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--blue-50); color: var(--blue-500); }
.qfeat h3 { font-size: var(--text-h4); color: var(--fg-1); }
.qfeat p { font-size: var(--text-base); }
.cert-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }

/* ---- IP / callout band ---- */
.ip-band { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-10); display: flex; align-items: center; gap: var(--space-8); }
.ip-band .ip-seal { width: 64px; height: 64px; flex: none; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--blue-900); color: #fff; }
.ip-band .ip-seal .icon { width: 30px; height: 30px; }
.ip-band .ip-body { display: flex; flex-direction: column; gap: var(--space-2); }
.ip-band .ip-body h3 { font-size: var(--text-h3); color: var(--fg-1); }
.ip-band .ip-body p { font-size: var(--text-base); max-width: 72ch; }
@media (max-width: 640px){ .ip-band { flex-direction: column; align-items: flex-start; padding: var(--space-8); } }

/* ---- Vertical numbered timeline ---- */
.timeline { max-width: 860px; }
.tl-step { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-6); position: relative; padding-bottom: var(--space-10); }
.tl-step:last-child { padding-bottom: 0; }
.tl-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: -4px; width: 2px; background: var(--border-strong); }
.tl-num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--blue-900); color: #fff; font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.tl-body { padding-top: var(--space-1); display: flex; flex-direction: column; gap: var(--space-2); }
.tl-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.tl-head h3 { font-size: var(--text-h4); color: var(--fg-1); }
.tl-dur { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.tl-body p { font-size: var(--text-base); max-width: 66ch; }

/* ---- Gallery ---- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 920px){ .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .gallery-grid { grid-template-columns: 1fr; } }
.gallery-foot { margin-top: var(--space-12); display: flex; justify-content: center; }

/* ---- Quote CTA band ---- */
.cta-band { position: relative; background: var(--bg-navy); color: #fff; overflow: hidden; isolation: isolate; }
.cta-band .cta-media { position: absolute; inset: 0; z-index: -2; }
.cta-band .cta-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.8); }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(16,24,41,0.95) 0%, rgba(16,24,41,0.86) 46%, rgba(16,24,41,0.55) 100%); }
.cta-band .container { padding-block: clamp(64px, 9vw, 116px); }
.cta-inner { max-width: 680px; display: flex; flex-direction: column; gap: var(--space-5); }
.cta-inner h2 { color: #fff; }
.cta-inner .lead { color: var(--fg-inverse-dim); }
.cta-inner .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }
.cta-inner .reassure { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-inverse-dim); margin-top: var(--space-1); }
.cta-inner .reassure .icon { color: var(--accent-400); flex: none; }

/* ---- Numbered 3/4-up step row (process flows) ---- */
.step-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); counter-reset: step; }
.step-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px){ .step-row, .step-row.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .step-row, .step-row.cols-4 { grid-template-columns: 1fr; } }
.step-cell { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.step-cell .step-n { width: 40px; height: 40px; flex: none; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--blue-900); color: #fff; font-family: var(--font-mono); font-weight: var(--weight-semibold); }
.step-cell h3 { font-size: var(--text-h4); color: var(--fg-1); }
.step-cell p { font-size: var(--text-base); }

/* ---- Downloadable document cards (quality / traceability) ---- */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 880px){ .doc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .doc-grid { grid-template-columns: 1fr; } }
.doc-card { display: flex; align-items: center; gap: var(--space-4); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--space-5); transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); text-decoration: none; }
.doc-card:hover { box-shadow: var(--shadow-md); border-color: var(--slate-300); transform: translateY(-2px); text-decoration: none; }
.doc-card .doc-icon { width: 46px; height: 46px; flex: none; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--blue-50); color: var(--blue-500); }
.doc-card .doc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-card .doc-title { font-weight: var(--weight-semibold); color: var(--fg-1); font-size: var(--text-base); }
.doc-card .doc-type { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.doc-card .doc-dl { margin-inline-start: auto; color: var(--blue-500); flex: none; }
.doc-note { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--fg-3); display: flex; gap: var(--space-2); align-items: flex-start; }
.doc-note .icon { color: var(--accent-500); flex: none; margin-top: 1px; }

/* ---- Disclaimer / fine-print band ---- */
.disclaimer { background: var(--bg-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent-500); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); }
.disclaimer p { font-size: var(--text-sm); color: var(--fg-2); max-width: 86ch; }
.disclaimer .dl-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--fg-3); margin-bottom: var(--space-2); display: block; }

/* ---- Rating cells (materials guide $$$ / stars) ---- */
.rate { font-family: var(--font-mono); letter-spacing: 1px; }
.rate .on { color: var(--blue-600); }
.rate .off { color: var(--slate-300); }

/* ---- Prose (privacy / long text) ---- */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--text-h3); margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--space-4); color: var(--fg-2); }
.prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--fg-2); display: flex; flex-direction: column; gap: var(--space-2); }
.prose a { color: var(--link); }