/*
Theme Name: CY Seal
Description: CY Seal B2B bottle-closure theme.
Version: 0.1.0
*/
:root {
  --ink: #17332c;
  --ink-soft: #54716a;
  --green: #74be2b;
  --green-dark: #3f7818;
  --green-action-hover: #2d5e0e;
  --mint: #eff8ec;
  --blue: #087ca6;
  --line: #dce8e1;
  --paper: #fff;
  --soft: #f7faf7;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Manrope, Inter, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --content: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.65 var(--sans); }
a { color: inherit; }
img { max-width: 100%; height: auto; }
.container { width: min(var(--content), calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 100; padding: 9px 14px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 12px; }
.topline { padding: 7px 0; border-bottom: 1px solid var(--line); background: #f5faf3; color: #6c8b80; font: 10px var(--mono); letter-spacing: .07em; }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / 94%); backdrop-filter: blur(12px); }
.header-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { font-size: 20px; font-weight: 800; text-decoration: none; }
.brand span { color: var(--green-dark); font-family: var(--serif); font-weight: 400; }
.brand--image { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-logo { display: block; width: auto; height: 52px; }
.brand-logo--footer { height: 62px; padding: 5px; border-radius: 8px; background: #fff; }
.menu { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.menu a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 12px; font-weight: 800; text-decoration: none; }
.menu a:hover, .menu a:focus-visible { color: var(--blue); }
.menu-toggle { min-width: 48px; min-height: 44px; display: none; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 800 12px var(--sans); }
.menu-toggle i, .menu-toggle i::before, .menu-toggle i::after { width: 14px; height: 2px; display: block; position: relative; background: currentColor; content: ""; }
.menu-toggle i::before { position: absolute; top: -5px; }
.menu-toggle i::after { position: absolute; top: 5px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--green-dark); border-radius: 999px; padding: 12px 19px; background: var(--green-dark); color: #fff; font-weight: 800; text-decoration: none; }
.button:hover, .button:focus-visible { border-color: var(--green-action-hover); background: var(--green-action-hover); }
[id] { scroll-margin-top: 110px; }
.site-main { min-height: 55vh; }
.page-hero { padding: 72px 0 48px; background: linear-gradient(180deg, #fff, var(--soft)); }
.eyebrow { color: var(--blue); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.08; }
h1 { max-width: 850px; margin: 12px 0 20px; font-size: clamp(44px, 6vw, 74px); }
h2 { font-size: clamp(32px, 4vw, 52px); }
.lede { max-width: 680px; color: var(--ink-soft); font-size: 17px; }
.content-section { padding: 72px 0; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr); gap: 64px; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content a { color: var(--blue); }
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.entity-card { min-height: 250px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.entity-card-body { padding: 24px; }
.entity-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.entity-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.entity-card:hover .entity-card-media img { transform: scale(1.035); }
.entity-card p { color: var(--ink-soft); }
.entity-card h2, .entity-card h3 { margin: 18px 0 12px; font-size: clamp(22px, 2.4vw, 30px); }
.entity-card a { text-decoration: none; }
.entity-card--seal_document { border-top: 3px solid var(--blue); }
.entity-card--seal_application { background: var(--soft); }
.text-link { color: var(--blue); font-weight: 800; }
.closure-card { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 22px; overflow: hidden; position: relative; border: 1px solid #cfe3d5; border-radius: 23px; background: radial-gradient(circle at 50% 45%, #fff 0 15%, #eff8ec 42%, #f8fdf7 72%); box-shadow: 0 18px 45px rgb(38 94 65 / 7%); }
.closure-card > span { position: absolute; inset: 22px auto auto 26px; color: var(--ink-soft); font: 9px var(--mono); letter-spacing: .09em; }
.closure-card p { margin: 0; color: var(--ink); font-weight: 800; }
.closure-card p b { color: var(--green); }
.closure-card small { color: var(--ink-soft); font: 10px var(--mono); }
.closure-disc { width: 220px; height: 45px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(90deg, #50b7d7, #ddf5fc 50%, #239ac4); box-shadow: 0 12px 22px rgb(23 51 44 / 16%), 0 0 0 1px #8ec9df; color: #146781; font: 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.entity-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .4fr); gap: 64px; align-items: start; }
.entity-action { position: sticky; top: 118px; padding: 26px; border: 1px solid var(--line); border-radius: 15px; background: var(--soft); }
.entity-action p:not(.eyebrow) { color: var(--ink-soft); }
.entity-section { display: grid; grid-template-columns: minmax(220px, .4fr) minmax(0, 1fr); gap: 64px; padding: 58px 0; border-top: 1px solid var(--line); }
.entity-section-heading span { color: var(--green-dark); font: 10px var(--mono); }
.entity-section-heading h2 { margin: 12px 0 0; font-size: clamp(30px, 3.5vw, 46px); }
.entity-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.entity-fact { padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.entity-fact h3 { margin: 0 0 10px; color: var(--blue); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.entity-fact p { margin: 0; color: var(--ink-soft); }
.entity-section--lead .entity-facts, .entity-section--technical .entity-facts { grid-template-columns: 1fr; }
.entity-section--lead .entity-fact { padding: 0; border: 0; font-size: 18px; }
.entity-section--technical .entity-fact { border-color: #35564a; background: var(--ink); }
.entity-section--technical .entity-fact h3 { color: var(--green); }
.entity-section--technical .entity-fact p { color: #c3d8cd; }
.entity-hero--seal_product { background: linear-gradient(180deg, #fff, #f2faef); }
.entity-hero--seal_application { background: linear-gradient(180deg, #fff, #eff8fc); }
.entity-hero--seal_document { border-bottom: 3px solid var(--blue); }
.entity-hero--seal_case { background: linear-gradient(180deg, #fff, #f5f8f6); }
.entity-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); gap: clamp(38px, 7vw, 88px); align-items: center; }
.entity-hero-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 24px 56px rgba(21, 43, 55, .15); }
.entity-hero-media img { width: 100%; height: 100%; object-fit: contain; }
.entity-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 0 0 60px; }
.entity-gallery figure { margin: 0; overflow: hidden; border-radius: 14px; background: #fff; aspect-ratio: 4 / 3; }
.entity-gallery img { width: 100%; height: 100%; object-fit: contain; }
.breadcrumbs { margin: 0 0 28px; color: var(--ink-soft); font-size: 13px; }
.breadcrumbs a { color: var(--blue); }
.related-products { padding-top: 58px; border-top: 1px solid var(--line); }
.related-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-products-grid a { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); font-weight: 800; text-decoration: none; }
.empty-state { padding: 28px; border: 1px dashed var(--line); border-radius: 15px; background: var(--soft); color: var(--ink-soft); }
.inquiry-form { display: grid; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #c9ddd0; border-radius: 8px; padding: 11px 12px; background: #fff; color: var(--ink); font: inherit; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid rgb(8 124 166 / 20%); border-color: var(--blue); }
.field-error, .form-error { color: #a52828; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.site-footer { padding: 54px 0; background: #102d25; color: #d3e0d9; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 42px; }
.footer-grid a { color: #a8c2b7; }
.page-story p { color: var(--ink-soft); }
.story-hero { padding: clamp(70px, 9vw, 118px) 0 72px; overflow: hidden; background: linear-gradient(180deg, #fff, var(--soft)); }
.story-hero h1 { max-width: 900px; }
.story-hero__grid, .ledger-hero, .workbench-hero, .dossier-hero, .notebook-hero, .diagnostic-hero, .enquiry-hero, .resource-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); gap: clamp(42px, 7vw, 92px); align-items: center; }
.story-block { padding: clamp(72px, 9vw, 112px) 0; }
.story-block:nth-child(odd) { background: var(--soft); }
.story-block h2, .story-cta h2 { max-width: 800px; margin: 10px 0 30px; }
.section-heading { display: grid; grid-template-columns: 1fr minmax(260px, .5fr); gap: 48px; align-items: end; }
.section-heading > p { margin-bottom: 34px; }
.action-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 28px; }
.micro-note { max-width: 680px; margin-top: 22px; font-size: 13px; }
.story-cta { padding: clamp(72px, 9vw, 110px) 0; background: var(--mint); }
.story-cta .container { max-width: 900px; }
.story-cta p { max-width: 680px; }
.story-media { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #dfe9e3; }
.story-media img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.story-media figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 13px 16px; color: var(--ink-soft); font-size: 13px; background: #fff; border-top: 1px solid var(--line); }
.story-media figcaption span { max-width: 360px; text-align: right; }
.story-media--hero { box-shadow: 0 26px 60px rgba(21, 43, 55, .16); }
.story-media--hero img { min-height: 440px; }
.story-media--wide img { min-height: 340px; }
.factory-film, .lab-note, .release-layout, .equipment-context, .resource-state { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: clamp(34px, 6vw, 78px); align-items: center; }
.factory-film { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
.material-gallery { display: grid; grid-template-columns: 1.1fr .8fr 1fr; gap: 18px; align-items: stretch; }
.material-gallery .story-media:nth-child(2) { transform: translateY(28px); }
.sample-view { display: grid; grid-template-columns: 1fr 1.35fr; gap: 22px; align-items: end; }
.sample-view .story-media:first-child { margin-bottom: 52px; }
.workshop-window { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(240px, .55fr); gap: 38px; align-items: end; }
.story-block--workshop-window, .story-block--material-gallery, .story-block--sample-view, .story-block--contact-image { padding-block: clamp(44px, 6vw, 72px); }
.contact-image { max-width: 980px; }

/* Home: gateways and system relationships. */
.story-hero--product { padding-top: clamp(74px, 10vw, 132px); }
.choice-pair { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; margin-top: 36px; }
.choice-pair a { min-height: 280px; padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: #fff; text-decoration: none; }
.choice-pair a:last-child { background: var(--ink); color: #fff; }
.choice-pair span, .option-index b, .role-rail span { color: var(--blue); font: 10px var(--mono); letter-spacing: .1em; }
.choice-pair a:last-child p { color: #c3d8cd; }
.neck-map { display: grid; grid-template-columns: .75fr 1.25fr; gap: 72px; align-items: center; }
.signal-orbit { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; padding: 32px; border: 1px solid #cfe3d5; border-radius: 50%; background: radial-gradient(circle, #fff 0 28%, #eff8ec 29% 62%, #fff 63%); list-style: none; }
.signal-orbit li { min-height: 150px; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgb(23 51 44 / 8%); }
.signal-orbit span { display: block; color: var(--ink-soft); }
.option-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 36px 0 24px; border-block: 1px solid var(--line); }
.option-strip span { padding: 24px 16px; border-right: 1px solid var(--line); font-weight: 800; }
.process-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 40px 0; padding: 0; list-style: none; }
.process-line li { padding: 22px; border-top: 2px solid var(--green); }
.process-line b { display: block; margin-bottom: 20px; color: var(--blue); font: 10px var(--mono); }
.story-block--evidence-band { background: var(--ink) !important; }
.story-block--evidence-band h2 { color: #fff; }
.story-block--evidence-band p { color: #b8cec4; }
.story-block--evidence-band a { color: #fff; }

/* About: a supply-role ledger, not a card wall. */
.story-hero--ledger { background: #fff; border-bottom: 1px solid var(--line); }
.identity-stamp { margin: 0; border-left: 3px solid var(--green); }
.identity-stamp div { padding: 20px 28px; border-bottom: 1px solid var(--line); }
.identity-stamp dt { color: var(--blue); font: 10px var(--mono); text-transform: uppercase; }
.identity-stamp dd { margin: 5px 0 0; font-weight: 800; }
.role-rail { margin-top: 40px; border-top: 1px solid var(--line); }
.role-rail article { display: grid; grid-template-columns: 70px .75fr 1fr; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.role-rail h3, .role-rail p { margin: 0; }
.buyer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.buyer-columns article { padding-top: 22px; border-top: 3px solid var(--blue); }
.story-block--experience-note { background: #eaf4f7 !important; }

/* Customization: a material workbench. */
.story-hero--workbench { background: linear-gradient(135deg, #fff 0 62%, #eff8ec 62%); }
.sample-stack { display: grid; gap: 12px; transform: rotate(-4deg); }
.sample-stack span { padding: 24px 30px; border: 1px solid #b9d8c1; border-radius: 999px; background: #fff; box-shadow: 0 9px 25px rgb(23 51 44 / 8%); color: var(--ink); font: 11px var(--mono); letter-spacing: .12em; }
.option-index { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 42px; background: var(--line); border: 1px solid var(--line); }
.option-index article { padding: 34px; background: #fff; }
.format-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.format-compare article { padding: 38px; border-radius: 22px; background: #fff; }
.disc-shape { width: 150px; height: 38px; margin: 18px auto 46px; border-radius: 50%; background: linear-gradient(90deg, #6ebad0, #edfaff, #4babc8); box-shadow: 0 12px 18px rgb(23 51 44 / 15%); }
.roll-shape { width: 170px; height: 84px; margin: 0 auto 18px; border: 18px solid #8bc8d9; border-radius: 50%; box-shadow: 25px 10px 0 #56abc4; }
.story-block--material-band { background: var(--ink) !important; }
.story-block--material-band h2 { color: #fff; }
.story-block--material-band p { color: #bed2c8; }
.story-block--material-band a { color: #fff; }
.version-path { display: grid; grid-template-columns: repeat(4, 1fr); margin: 42px 0; padding: 0; list-style: none; }
.version-path li { padding: 26px; border-top: 2px solid var(--blue); }
.version-path b, .version-path span { display: block; }
.version-path b { color: var(--blue); font: 10px var(--mono); }

/* Quality: dense evidence index. */
.story-hero--dossier { border-bottom: 3px solid var(--blue); background: #fff; }
.dossier-index { display: grid; gap: 0; border-block: 1px solid var(--line); }
.dossier-index span { padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font: 11px var(--mono); }
.reference-matrix { display: grid; grid-template-columns: 1fr 1fr; margin-top: 38px; border: 1px solid var(--line); }
.reference-matrix div { min-height: 150px; padding: 28px; border: 1px solid var(--line); background: #fff; }
.reference-matrix b, .reference-matrix span { display: block; }
.reference-matrix span { margin-top: 12px; color: var(--ink-soft); }
.revision-track, .release-route, .feedback-loop { display: flex; align-items: center; gap: 18px; margin: 42px 0; }
.revision-track span, .release-route span, .feedback-loop span { flex: 1; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: center; font-weight: 800; }
.revision-track i, .release-route i, .feedback-loop i { color: var(--green-dark); font-style: normal; }
.access-ledger article { padding: 22px 0; border-top: 1px solid var(--line); }
.story-block--testing-boundary { background: #eaf4f7 !important; }

/* Process: a route with branches. */
.story-hero--route { background: var(--ink); color: #fff; }
.story-hero--route .lede { color: #bdd1c8; }
.route-overview { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; margin: 46px 0; }
.route-overview span { padding: 18px 10px; border-top: 2px solid var(--green); color: #d8e5de; font-size: 12px; }
.step-ledger { margin: 42px 0 0; padding: 0; list-style: none; }
.step-ledger li { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 30px 0; border-top: 1px solid var(--line); }
.step-ledger li > b { color: var(--green-dark); font: 28px var(--mono); }
.step-ledger h3, .step-ledger p { margin: 0 0 8px; }
.story-block--route-branch .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
.branch-card { padding: 38px; border-radius: 20px; background: #fff; }
.branch-card--repeat { background: #eaf4f7; }
.responsibility-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.responsibility-table article { padding: 30px; border-right: 1px solid var(--line); background: #fff; }
.route-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; }
.route-links a { display: grid; gap: 8px; padding: 26px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
.route-links span { color: var(--ink-soft); }

/* Sampling: notebook, handoff and confirmation equation. */
.story-hero--notebook { background: linear-gradient(180deg, #fff, #edf7fb); }
.notebook-card { padding: 32px; border: 1px solid #badbe6; border-radius: 8px; background: repeating-linear-gradient(#fff, #fff 41px, #d8e9ef 42px); transform: rotate(2deg); box-shadow: 16px 18px 0 #dfeee2; }
.notebook-card > * { display: block; min-height: 42px; }
.notebook-card > span, .notebook-card small { color: var(--blue); font: 10px var(--mono); }
.scenario-tags, .contact-prep { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0; }
.scenario-tags span, .contact-prep span { padding: 12px 17px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; }
.prep-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 72px; }
.prep-layout ol { margin: 0; padding: 0; list-style: none; counter-reset: prep; }
.prep-layout li { display: grid; grid-template-columns: .7fr 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.handoff-pair, .support-boundary, .repeat-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.handoff-pair article, .support-boundary article, .repeat-fork article { padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.confirmation-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin: 38px 0; }
.confirmation-equation span, .confirmation-equation strong { padding: 26px; border-radius: 14px; background: #fff; text-align: center; }
.confirmation-equation strong { background: var(--ink); color: #fff; }

/* Ordering: document-like commercial sheet. */
.story-hero--commercial { background: #fff; border-bottom: 1px solid var(--line); }
.commercial-tags { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 900px; margin: 40px 0 32px; }
.commercial-tags span { padding: 18px 12px; border-block: 1px solid var(--line); border-right: 1px solid var(--line); font: 11px var(--mono); }
.quotation-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
.quotation-compare article { padding: 34px; border-top: 4px solid var(--blue); background: #fff; }
.quotation-compare article:last-child { border-color: var(--green-dark); }
.quotation-compare span { font: 10px var(--mono); }
.commercial-rows > div { display: grid; grid-template-columns: 100px 1fr 110px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--line); }
.commercial-rows b { color: var(--blue); }
.commercial-rows em { color: var(--green-dark); font-style: normal; font-weight: 800; }
.checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
.checklist-grid li { padding: 18px; border-bottom: 1px solid var(--line); }
.story-block--change-sheet { border-block: 1px solid var(--line); background: #fff !important; }

/* Technical support: diagnostic topology. */
.story-hero--diagnostic { background: linear-gradient(120deg, #fff 0 58%, #eaf4f7 58%); }
.diagnostic-node { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.diagnostic-node b { grid-column: 1 / -1; padding: 28px; border-radius: 50%; background: var(--ink); color: #fff; text-align: center; }
.diagnostic-node span { padding: 18px; border: 1px solid #badbe6; border-radius: 12px; background: #fff; text-align: center; }
.support-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 34px; background: var(--line); border: 1px solid var(--line); }
.support-inputs article { padding: 28px; background: #fff; }
.support-inputs b { color: var(--blue); font: 10px var(--mono); }
/* The 1px gap doubles as the grid's rule colour, so a trailing row that cannot
   be filled would read as a blank block. The last card spans it instead. */
.support-inputs > article:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.diagnostic-sequence ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; }
.diagnostic-sequence li { padding: 14px 18px; border-radius: 999px; background: var(--ink); color: #fff; }
.story-block--existing-first { background: #eaf4f7 !important; }

/* Resources: an editorial index. */
.story-hero--resource { padding-block: 58px; background: #fff; border-bottom: 1px solid var(--line); }
.resource-hero { grid-template-columns: 1fr auto; }
.resource-types { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.resource-types article { padding: 36px; border-left: 3px solid var(--blue); background: #fff; }
.resource-types span { color: var(--blue); font: 10px var(--mono); }
.document-anatomy { margin: 0; }
.document-anatomy div { display: grid; grid-template-columns: 100px 1fr; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.document-anatomy dt { color: var(--green-dark); font-weight: 800; }
.document-anatomy dd { margin: 0; color: var(--ink-soft); }
.story-block--resource-state { text-align: center; }
.story-block--resource-state p { max-width: 680px; margin-inline: auto; }

/* Contact: a practical enquiry desk. */
.story-hero--enquiry { background: linear-gradient(180deg, #fff, #eff8ec); }
.enquiry-prompt { padding: 34px; border-radius: 20px; background: var(--ink); color: #fff; }
.enquiry-prompt > * { display: block; padding: 12px 0; border-bottom: 1px solid #35564a; }
.enquiry-prompt span, .enquiry-prompt small { color: #9fc0b1; font: 10px var(--mono); }
.story-block--receipt-boundary { background: #eaf4f7 !important; }
.enquiry-context { margin: 0 0 22px; padding: 16px 18px; border-left: 3px solid var(--blue); background: #eaf4f7; color: var(--ink); }
.contact-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; border: 1px solid var(--line); background: var(--line); }
.contact-ledger > div { padding: 22px; background: #fff; }
.contact-ledger dt { color: var(--blue); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.contact-ledger dd { margin: 7px 0 0; }
.story--policy-reading, .story--terms-reading, .story--technology-register { max-width: 860px; margin-inline: auto; }
.story-hero--policy { background: #fff; }
@media (max-width: 800px) {
  body { font-size: 16px; }
  .container { width: calc(100% - 36px); }
  html { scroll-padding-top: 84px; }
  [id] { scroll-margin-top: 84px; }
  .topline { display: none; }
  .header-inner { min-height: 72px; position: relative; padding-block: 10px; }
  .brand-logo { height: 46px; }
  .menu-toggle { display: inline-flex; }
  .primary-navigation { display: none; position: absolute; inset: calc(100% + 1px) 0 auto; padding: 12px 18px 18px; border: 1px solid var(--line); border-top: 0; background: #fff; box-shadow: 0 16px 32px rgb(23 51 44 / 12%); }
  .primary-navigation[data-open] { display: block; }
  .menu { display: grid; align-items: stretch; gap: 0; }
  .menu a { min-height: 48px; border-bottom: 1px solid var(--line); }
  .content-grid, .archive-grid, .form-grid, .footer-grid, .entity-intro, .entity-section, .entity-facts, .entity-hero-grid { grid-template-columns: 1fr; }
  .entity-action { position: static; }
  .closure-card { min-height: 310px; }
  .story-hero__grid, .ledger-hero, .workbench-hero, .dossier-hero, .notebook-hero, .diagnostic-hero, .enquiry-hero, .resource-hero, .section-heading, .neck-map, .prep-layout { grid-template-columns: 1fr; }
  .choice-pair, .option-index, .format-compare, .reference-matrix, .story-block--route-branch .container, .quotation-compare, .handoff-pair, .support-boundary, .repeat-fork, .resource-types { grid-template-columns: 1fr; }
  .factory-film, .lab-note, .release-layout, .equipment-context, .resource-state, .material-gallery, .sample-view, .workshop-window { grid-template-columns: 1fr; }
  .material-gallery .story-media:nth-child(2), .sample-view .story-media:first-child { transform: none; margin-bottom: 0; }
  .story-media--hero img, .story-media--wide img { min-height: 280px; }
  .option-strip, .version-path, .process-line, .route-overview, .commercial-tags { grid-template-columns: 1fr 1fr; }
  .buyer-columns, .responsibility-table, .route-links, .support-inputs { grid-template-columns: 1fr; }
  .related-products-grid, .contact-ledger { grid-template-columns: 1fr; }
  .role-rail article { grid-template-columns: 48px 1fr; }
  .role-rail article p { grid-column: 2; }
  .revision-track, .release-route, .feedback-loop { align-items: stretch; flex-direction: column; }
  .revision-track i, .release-route i, .feedback-loop i { transform: rotate(90deg); text-align: center; }
  .confirmation-equation { grid-template-columns: 1fr; }
  .commercial-rows > div { grid-template-columns: 90px 1fr; }
  .identity-stamp { margin-top: 18px; }
  .sample-stack { transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------------------
   Product archive: filter bar and comparison cards.

   Filtering narrows reading; it never states that a record suits a bottle. The
   bar is rendered hidden and un-hidden by product-filter.js, so with scripting
   off no dead control appears and every record stays visible.
--------------------------------------------------------------------------- */
.archive-hero--seal_product .lede { max-width: 720px; }
.product-filters { padding: 0 0 34px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-end; padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--soft); }
.filter-group { margin: 0; padding: 0; border: 0; }
.filter-group legend { margin-bottom: 12px; color: var(--blue); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.filter-group label { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin: 0 16px 0 0; cursor: pointer; }
.filter-group input { width: 16px; height: 16px; accent-color: var(--green-dark); }
.filter-count { color: var(--ink-soft); font: 10px var(--mono); }
.filter-clear { border: 0; background: none; cursor: pointer; }
.archive-status { margin-bottom: 18px; color: var(--ink-soft); font: 11px var(--mono); letter-spacing: .06em; }

.entity-card--product { display: flex; flex-direction: column; min-height: 0; }
.entity-card--product .entity-card-body { display: flex; flex-direction: column; flex: 1; gap: 14px; }
.entity-card--product h2 { margin: 0; font-size: clamp(19px, 1.9vw, 24px); }
.entity-card-media--structural { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--soft) 0 12px, #eef4f0 12px 24px); }
.entity-card-media--structural span { color: var(--ink-soft); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.entity-card-facts { margin: 0; }
.entity-card-facts div { display: grid; grid-template-columns: 116px 1fr; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); }
.entity-card-facts dt { color: var(--blue); font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.entity-card-facts dd { margin: 0; color: var(--ink); font-weight: 700; }
.entity-card-note { margin: 0; font-size: 13px; }
.entity-card-note b { display: block; color: var(--green-dark); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.entity-card-note--limit b { color: var(--ink-soft); }
.entity-card-actions { margin: 0; }
.archive-grid--equipment { grid-template-columns: repeat(2, 1fr); }
.archive-grid--equipment .entity-card { border-top: 3px solid var(--blue); }

/* Product detail sections. `facts` reads as a comparison table; `split` reads as
   two questions answered side by side. Neither existed before, so every record
   rendered through the same two-column card run. */
.entity-section--facts .entity-facts { grid-template-columns: 1fr; gap: 0; }
.entity-section--facts .entity-fact { display: grid; grid-template-columns: 190px 1fr; gap: 26px; padding: 18px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.entity-section--facts .entity-fact h3 { padding-top: 3px; }
.entity-section--split .entity-facts { grid-template-columns: 1fr 1fr; }
.entity-section--split .entity-fact { background: var(--soft); border-color: #cfe3d5; }

@media (max-width: 800px) {
  .entity-card-facts div, .entity-section--facts .entity-fact { grid-template-columns: 1fr; gap: 6px; }
  .entity-section--split .entity-facts, .archive-grid--equipment { grid-template-columns: 1fr; }
  .filter-bar { gap: 18px; padding: 20px; }
}

/* Product detail: the quick-judgement band and the documents section. Both are
   product-only; the other entity types render through entity-section alone. */
.quick-judgement { padding: 0 0 72px; }
.quick-judgement dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 26px 0 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }
.quick-judgement dl > div { padding: 26px; background: #fff; }
.quick-judgement dt { color: var(--green-dark); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.quick-judgement dl > div:last-child dt { color: var(--ink-soft); }
.quick-judgement dd { margin: 12px 0 0; color: var(--ink-soft); }
.entity-documents { display: grid; gap: 18px; }
.entity-documents p { margin: 0; color: var(--ink-soft); }
.document-ledger { margin: 0; }
.document-ledger div { display: grid; grid-template-columns: 190px 1fr; gap: 26px; padding: 18px 0; border-top: 1px solid var(--line); }
.document-ledger dt { color: var(--blue); font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.document-ledger dd { margin: 0; }
.related-note { display: block; margin-top: 8px; color: var(--ink-soft); font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
@media (max-width: 800px) {
  .quick-judgement dl { grid-template-columns: 1fr; }
  .document-ledger div { grid-template-columns: 1fr; gap: 6px; }
}

/* Homepage browsing summary. Counts come from the approved records at render
   time, and each entry deep-links into the archive filter. It is deliberately
   not presented as an approved product classification. */
.browse-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.browse-axis h3 { margin: 0 0 16px; color: var(--blue); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.browse-axis ul { margin: 0; padding: 0; list-style: none; }
.browse-axis li + li { border-top: 1px solid var(--line); }
.browse-axis a { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; font-weight: 700; text-decoration: none; }
.browse-axis a:hover { color: var(--blue); }
.browse-axis span { color: var(--ink-soft); font: 10px var(--mono); }
@media (max-width: 800px) { .browse-summary { grid-template-columns: 1fr; gap: 22px; } }

/* Home: three buyer entries where there were two, and the step list now carries
   what each side puts in. `.choice-pair` was built for two cards with the last
   one dark; the three-up variant moves that emphasis to the application entry. */
.choice-pair--three { grid-template-columns: repeat(3, 1fr); }
.choice-pair--three a { min-height: 240px; padding: 28px; }
.choice-pair--three a:last-child { background: #fff; color: inherit; }
.choice-pair--three a:last-child p { color: var(--ink-soft); }
.choice-pair--three a:nth-child(2) { background: var(--ink); color: #fff; }
.choice-pair--three a:nth-child(2) p { color: #c3d8cd; }
.process-pairs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 40px 0; padding: 0; list-style: none; }
.process-pairs li { display: grid; align-content: start; gap: 10px; padding: 22px; border-top: 2px solid var(--green); }
.process-pairs b { margin-bottom: 8px; color: var(--blue); font: 10px var(--mono); letter-spacing: .06em; }
.process-pairs span { color: var(--ink-soft); font-size: 13px; }
.story-block--browse { background: var(--soft); }
@media (max-width: 800px) {
  .choice-pair--three, .process-pairs { grid-template-columns: 1fr; }
  .choice-pair--three a { min-height: 0; }
}

/* Thank-you receipt: echoes the starting point and carried context so the
   visitor does not have to repeat them on follow-up. */
.receipt-echo { display: grid; gap: 1px; margin: 20px 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.receipt-echo > div { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 16px 20px; background: #fff; }
.receipt-echo dt { color: var(--blue); font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.receipt-echo dd { margin: 0; }
@media (max-width: 800px) { .receipt-echo > div { grid-template-columns: 1fr; gap: 6px; } }