/* Proteqpack Consulting — additions on top of the shared Proteqpack house style (style.css).
   Keep style.css identical to proteqpack-supplies.com; put Consulting-only rules here. */

/* Services: three photo cards on top, two icon cards below */
.anim-card { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.services-more { margin-top: 24px; }
.card-body .tags { margin: 0 0 16px; }

/* Seven-step development process (the shared .steps grid wraps it 4 + 3) */
.steps-note { margin: 28px 0 0; color: #b9c3cd; max-width: 68ch; }

/* Free DoC check: example traffic-light report */
.doc-report { background: #fff; color: var(--text); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.doc-report-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.doc-report-head strong { font-family: var(--head); color: var(--navy); font-size: 1rem; letter-spacing: .02em; }
.doc-report-head span { font-family: var(--head); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.doc-report ul { list-style: none; margin: 0; padding: 6px 20px 8px; }
.doc-report li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; }
.doc-report li:last-child { border-bottom: 0; }
.doc-report li em { font-style: normal; font-family: var(--head); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.dot { width: 14px; height: 14px; border-radius: 50%; }
.dot.green { background: #2e9d5b; } .doc-report li em.green { color: #1e7a45; }
.dot.amber { background: #e3a21a; } .doc-report li em.amber { color: #9a6a00; }
.dot.red { background: #d2453b; }   .doc-report li em.red { color: #a8261d; }
.doc-report-foot { padding: 14px 20px; background: var(--navy); color: #c7d0d9; font-size: .88rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.doc-report-foot strong { color: #fff; font-family: var(--head); letter-spacing: .04em; }
.example-note { margin: 12px 4px 0; font-size: .82rem; color: #9fb0bf; }

/* Projects: case cards */
.case { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.case::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--blue), var(--blue-deep)); }
.case .who { font-family: var(--head); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.case h3 { color: var(--navy); font-size: 1.22rem; }
.case p { color: var(--text-soft); font-size: .96rem; }
.case .tags { margin-top: auto; padding-top: 6px; }
.tags span.live { background: var(--navy); color: #fff; }
.section-foot { margin-top: 32px; }

/* Stats on navy */
.stat span { display: block; }

/* About: Consulting + Supplies panels */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.duo .panel p { color: #b9c3cd; font-size: .95rem; }
.duo .panel .card-link { display: inline-block; margin-top: 14px; color: var(--blue-light); }
@media (max-width: 600px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Services page ---------- */
.sv-h { font-size: 1.05rem; color: var(--navy); margin: 1.4em 0 .7em; letter-spacing: .02em; }
.sv-figure { border-radius: var(--radius); }
.product .photo.sv-figure { aspect-ratio: 4 / 3; }
.product .anim-card.sv-figure { border: 1px solid var(--line); }
.sv-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 40px 0 0; padding: 22px 24px; gap: 16px 32px; }
.sv-spec div strong { margin-bottom: 4px; }
.sv-foot { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.sv-related { border-radius: var(--radius); padding: 26px; background: var(--navy); color: #c7d0d9; display: flex; flex-direction: column; }
.sv-related .who { font-family: var(--head); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 10px; }
.sv-related p { font-size: .96rem; }
.sv-related .card-link { margin-top: auto; color: #fff; }
.sv-related .btn { margin-top: auto; align-self: flex-start; }
.sv-note { font-size: .92rem; color: var(--text-soft); max-width: 72ch; margin: 16px 0 0; }
.product .example-note { color: var(--text-soft); }
.sv-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-partners .panel p { font-size: .9rem; }
@media (max-width: 900px) { .sv-foot { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .sv-spec { grid-template-columns: 1fr; } .sv-partners { grid-template-columns: 1fr; } }

/* KPI example scorecard */
.kpi-panel { background: #fff; border: 1px solid var(--line); padding: 28px; }
.kpi-panel .who { display: block; font-family: var(--head); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }
.kpi { margin-top: 18px; }
.kpi span { display: block; font-family: var(--head); color: var(--navy); font-size: .98rem; margin-bottom: 8px; }
.kpi i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--blue) var(--v), var(--line) var(--v)); }

/* FAQ */
.faq-wrap { max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--head); font-size: 1.12rem; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 1.5rem; color: var(--blue); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; max-width: 70ch; color: var(--text-soft); }

/* ---------- About page ---------- */
.about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.about-stats .stat strong { color: var(--navy); }
.about-stats .stat span { color: var(--text-soft); }
.lang-row { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lang-row .who { font-family: var(--head); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.lang-row .tags { margin: 0; }
@media (max-width: 600px) { .about-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Projects page ---------- */
.pfilter { display: flex; flex-wrap: wrap; gap: 8px; }
.pfilter button { font-family: var(--head); font-weight: 600; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; }
.pfilter button:hover { border-color: var(--blue); }
.pfilter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pfilter-count { margin: 14px 0 28px; font-size: .9rem; color: var(--text-soft); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pcase { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 90px; transition: box-shadow .25s; }
.pcase:hover { box-shadow: 0 20px 44px rgba(0,19,32,.12); }
.pcase[hidden] { display: none; }
.pcase-art { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pcase-body { padding: 22px 24px 20px; display: flex; flex-direction: column; }
.pcase-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.pcase-meta .who { font-family: var(--head); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.status { flex: none; font-family: var(--head); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.status.series { background: #e6f4ea; color: #1e5631; }
.status.done { background: #e8f1f9; color: var(--blue-dark); }
.status.live { background: var(--navy); color: #fff; }
.status.trial { background: #fff4dd; color: #8a5a00; }
.status.concept { background: var(--paper-2); color: var(--text-soft); border: 1px solid var(--line); }
.pcase h3 { color: var(--navy); font-size: 1.18rem; }
.pcase-body > p { color: var(--text-soft); font-size: .95rem; }
.pcase .tags { margin: 2px 0 14px; }
.pcase details { border-top: 1px solid var(--line); padding-top: 10px; }
.pcase summary { cursor: pointer; list-style: none; font-family: var(--head); font-weight: 600; font-size: .86rem; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-deep); }
.pcase summary::-webkit-details-marker { display: none; }
.pcase summary::after { content: " +"; }
.pcase details[open] summary::after { content: " –"; }
.pcase dl { margin: 12px 0 4px; }
.pcase dt { font-family: var(--head); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-top: 10px; }
.pcase dd { margin: 3px 0 0; font-size: .93rem; color: var(--text-soft); }
@media (max-width: 1080px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pgrid { grid-template-columns: 1fr; } }

/* ---------- Development roadmap (home #process) ---------- */
.roadmap { background-color: var(--navy); background-image: linear-gradient(rgba(95,176,232,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(95,176,232,.07) 1px, transparent 1px); background-size: 32px 32px; }
.roadmap .section-head p { color: #b9c3cd; }
.rm-board { position: relative; border: 1px solid rgba(191,224,247,.16); border-radius: var(--radius); background: rgba(0,19,32,.72); padding: clamp(18px, 3vw, 34px); display: grid; gap: 26px; }
.rm-board::before, .rm-board::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid rgba(191,224,247,.45); }
.rm-board::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.rm-board::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }

.rm-phases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 10px; }
.rm-phases span { grid-column: var(--c); position: relative; font-family: var(--head); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light); text-align: center; padding-top: 10px; border-top: 2px solid rgba(95,176,232,.55); }
.rm-phases span::before, .rm-phases span::after { content: ""; position: absolute; top: -7px; width: 2px; height: 12px; background: rgba(95,176,232,.55); }
.rm-phases span::before { left: 0; } .rm-phases span::after { right: 0; }
.rm-phases span:nth-child(3) { color: #f0c465; border-color: rgba(227,162,26,.6); }
.rm-phases span:nth-child(3)::before, .rm-phases span:nth-child(3)::after { background: rgba(227,162,26,.6); }
.rm-phases span:nth-child(4) { color: #7fd3a1; border-color: rgba(46,157,91,.65); }
.rm-phases span:nth-child(4)::before, .rm-phases span:nth-child(4)::after { background: rgba(46,157,91,.65); }

.rm-track { --p: 1; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 10px; }
.rm-track::before, .rm-track::after { content: ""; position: absolute; top: 33px; height: 4px; border-radius: 2px; }
.rm-track::before { left: calc(100% / 14); right: calc(100% / 14); background: repeating-linear-gradient(90deg, rgba(191,224,247,.28) 0 14px, transparent 14px 22px); }
.rm-track::after { left: calc(100% / 14); width: calc((var(--p) - 1) * 100% / 7); background: linear-gradient(90deg, var(--blue), var(--blue-light)); transition: width .45s ease; }
.rm-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0 2px; color: #c7d0d9; cursor: pointer; font: inherit; text-align: center; }
.rm-node b { position: relative; display: grid; place-items: center; width: 62px; height: 70px; background: rgba(95,176,232,.45); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font-family: var(--head); font-size: 1.15rem; color: #fff; transition: background .25s; }
.rm-node b::before { content: ""; position: absolute; inset: 2px; background: var(--navy); clip-path: inherit; z-index: -1; transition: background .25s; }
.rm-node b { isolation: isolate; }
.rm-node span { font-family: var(--head); font-size: .86rem; line-height: 1.2; color: #fff; text-wrap: balance; }
.rm-node i { font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .72rem; color: var(--blue-light); border: 1px solid rgba(95,176,232,.35); border-radius: 999px; padding: 1px 8px; }
.rm-node:hover b { background: var(--blue-light); }
.rm-node.is-done b::before { background: #0b2a42; }
.rm-node[aria-selected="true"] b { background: var(--blue-light); filter: drop-shadow(0 0 14px rgba(95,176,232,.55)); }
.rm-node[aria-selected="true"] b::before { background: var(--blue-deep); }
.rm-node:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; border-radius: 12px; }
.rm-gate { position: absolute; z-index: 2; top: 21px; left: calc(var(--g) * (100% + 10px) / 7 - 5px); transform: translateX(-50%); width: 28px; height: 28px; display: grid; place-items: center; background: #e3a21a; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-family: var(--head); font-size: .62rem; color: var(--navy); }

.rm-panel { border: 1px solid rgba(191,224,247,.14); border-radius: 18px; background: rgba(255,255,255,.035); padding: clamp(18px, 2.6vw, 28px); display: grid; gap: 18px; }
.rm-panel header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rm-panel header b { font-family: var(--head); font-size: 2rem; line-height: 1; color: var(--blue-light); }
.rm-panel h3 { margin: 0; font-size: 1.35rem; color: #fff; }
.rm-when { margin-left: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; color: var(--blue-light); border: 1px solid rgba(95,176,232,.35); border-radius: 999px; padding: 3px 12px; }
.rm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.rm-cols h4 { font-family: var(--head); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); margin: 0 0 8px; }
.rm-cols p { color: #c7d0d9; font-size: .95rem; margin: 0; }
.rm-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rm-docs li { position: relative; padding: 7px 12px 7px 34px; border-radius: 10px; background: rgba(95,176,232,.1); border: 1px solid rgba(95,176,232,.25); color: #fff; font-size: .9rem; }
.rm-docs li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 12px; height: 15px; transform: translateY(-50%); border: 1.5px solid var(--blue-light); border-radius: 2px; clip-path: polygon(0 0, 65% 0, 100% 28%, 100% 100%, 0 100%); }
.rm-gatenote { margin: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(227,162,26,.1); border: 1px solid rgba(227,162,26,.35); color: #f3dfb0; font-size: .93rem; }
.rm-gatenote span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: #e3a21a; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-family: var(--head); font-size: .62rem; color: var(--navy); }
.rm-panels.tabs .rm-panel:not(.is-active) { display: none; }
.rm-panels.tabs .rm-panel.is-active { animation: rm-in .35s ease; }
@keyframes rm-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rm-gantt { display: grid; gap: 6px; overflow-x: auto; }
.rm-gantt-head, .rm-row { display: grid; grid-template-columns: 170px minmax(420px, 1fr); gap: 14px; align-items: center; }
.rm-gantt-head > span { font-family: var(--head); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-light); }
.rm-weeks { display: grid; grid-template-columns: repeat(8, 1fr); }
.rm-weeks i { font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .72rem; color: #9fb0bf; border-left: 1px solid rgba(191,224,247,.18); padding-left: 6px; }
.rm-row > span { font-size: .84rem; color: #c7d0d9; white-space: nowrap; }
.rm-lane { --max: 8; position: relative; height: 22px; background-image: linear-gradient(90deg, rgba(191,224,247,.12) 0 1px, transparent 1px); background-size: 12.5% 100%; border-radius: 4px; }
.rm-lane b { position: absolute; top: 5px; height: 12px; left: calc(var(--s) * 100% / var(--max)); width: calc((var(--e) - var(--s)) * 100% / var(--max)); border-radius: 6px; opacity: .8; transition: opacity .2s, height .2s, top .2s; }
.ph-define { background: #5fb0e8; } .ph-design { background: #167ebf; } .ph-prove { background: #e3a21a; } .ph-deliver { background: #2e9d5b; }
.rm-lane em { position: absolute; z-index: 1; top: 2px; left: calc(var(--g) * 100% / var(--max)); transform: translateX(-50%); width: 18px; height: 18px; display: grid; place-items: center; background: #e3a21a; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); font-style: normal; font-family: var(--head); font-size: .5rem; color: var(--navy); }
.rm-row.is-active > span { color: #fff; }
.rm-row.is-active .rm-lane b { opacity: 1; top: 3px; height: 16px; box-shadow: 0 0 12px rgba(95,176,232,.45); }
.rm-gantt-note { margin: 8px 0 0; font-size: .84rem; color: #9fb0bf; max-width: 80ch; }

.rm-titleblock { margin: 0; justify-self: end; display: grid; grid-template-columns: auto auto auto auto auto; border: 1px solid rgba(191,224,247,.25); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .68rem; }
.rm-titleblock div { padding: 6px 10px; border-left: 1px solid rgba(191,224,247,.25); }
.rm-titleblock div:first-child { border-left: 0; }
.rm-titleblock dt { color: #6f8496; text-transform: uppercase; letter-spacing: .08em; }
.rm-titleblock dd { margin: 0; color: #c7d0d9; }

@media (max-width: 900px) {
  .rm-phases, .rm-track { display: none; }
  .rm-panels { position: relative; display: grid; gap: 14px; padding-left: 22px; }
  .rm-panels::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, rgba(191,224,247,.3) 0 10px, transparent 10px 16px); }
  .rm-panels.tabs .rm-panel, .rm-panels.tabs .rm-panel:not(.is-active) { display: grid; animation: none; }
  .rm-panel { position: relative; }
  .rm-panel::before { content: ""; position: absolute; left: -24px; top: 24px; width: 14px; height: 16px; background: var(--blue-light); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  .rm-cols { grid-template-columns: 1fr; gap: 14px; }
  .rm-when { margin-left: 0; }
  .rm-titleblock { justify-self: stretch; grid-template-columns: 1fr 1fr; }
  .rm-titleblock div:nth-child(odd) { border-left: 0; }
  .rm-titleblock div:nth-child(n+3) { border-top: 1px solid rgba(191,224,247,.25); }
  .rm-titleblock div:nth-child(2) { grid-column: span 1; }
}
@media (max-width: 600px) { .rm-gantt-head, .rm-row { grid-template-columns: 112px minmax(380px, 1fr); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .rm-track::after, .rm-node b, .rm-lane b { transition: none; } .rm-panels.tabs .rm-panel.is-active { animation: none; } }

/* Roadmap: packaging-type switch and mould-making bar */
.rm-types { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-types > span { font-family: var(--head); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); margin-right: 6px; }
.rm-types button { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--head); font-size: .84rem; letter-spacing: .03em; color: #fff; background: rgba(255,255,255,.04); border: 1px solid rgba(191,224,247,.25); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.rm-types button i { font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .72rem; color: var(--blue-light); }
.rm-types button:hover { border-color: var(--blue-light); }
.rm-types button[aria-pressed="true"] { background: var(--blue-deep); border-color: var(--blue-deep); }
.rm-types button[aria-pressed="true"] i { color: #dbeeff; }
.rm-types button:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.rm-lane b.ph-tool { background: repeating-linear-gradient(135deg, rgba(95,176,232,.9) 0 5px, rgba(95,176,232,.25) 5px 10px); border: 1px solid rgba(95,176,232,.9); }
.rm-legend { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #c7d0d9; }
.rm-legend i { display: inline-block; width: 26px; height: 10px; border-radius: 5px; background: repeating-linear-gradient(135deg, rgba(95,176,232,.9) 0 5px, rgba(95,176,232,.25) 5px 10px); border: 1px solid rgba(95,176,232,.9); }
.rm-legend[hidden] { display: none; }

/* Services: lead time by packaging type (0–8 months) */
.lt-chart { margin-top: 24px; padding: 22px 24px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); display: grid; gap: 10px; }
.lt-chart h3 { margin: 0 0 4px; font-size: 1rem; color: var(--navy); }
.lt-row, .lt-axis { display: grid; grid-template-columns: 170px minmax(0, 1fr) 110px; gap: 14px; align-items: center; }
.lt-row > span { font-family: var(--head); font-size: .9rem; color: var(--navy); }
.lt-row > em { font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .82rem; color: var(--blue-dark); text-align: right; white-space: nowrap; }
.lt-lane { position: relative; height: 16px; border-radius: 8px; background-color: var(--paper-2); background-image: linear-gradient(90deg, var(--line) 0 1px, transparent 1px); background-size: 12.5% 100%; }
.lt-lane b { position: absolute; top: 2px; bottom: 2px; left: calc(var(--a) * 12.5%); width: calc((var(--b) - var(--a)) * 12.5%); border-radius: 6px; background: linear-gradient(90deg, var(--blue), var(--blue-light)); }
.lt-axis > div { display: flex; justify-content: space-between; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .7rem; color: var(--text-soft); }
.lt-note { margin: 4px 0 0; font-size: .86rem; color: var(--text-soft); }
@media (max-width: 600px) { .lt-row, .lt-axis { grid-template-columns: 1fr; gap: 4px; } .lt-row > em { text-align: left; } .lt-axis > span, .lt-axis > em { display: none; } }

/* ---------- Header: Consulting has more menu items than Supplies ----------
   Give the header a little more room, keep the logo from shrinking, tighten the links,
   and fold into the Menu button earlier so the logo never runs into the menu. */
.site-header .wrap { width: min(1280px, 100% - 32px); gap: 20px; }
.site-header .brand { flex: none; }
.nav > a { padding: 10px 10px; }
.nav .btn { margin-left: 8px; padding: 12px 18px; }
:is(html[lang="nl"], html[lang="fr"]) .nav > a { padding: 10px 8px; font-size: .84rem; }
@media (max-width: 1320px) {
  .nav-toggle { display: block; }
  .nav { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--navy); padding: 8px 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); display: none; }
  .nav.open { display: flex; }
  .nav > a, :is(html[lang="nl"], html[lang="fr"]) .nav > a { padding: 14px 6px; font-size: .92rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav .btn { margin: 14px 0 0; justify-content: center; }
  .lang-top { display: flex; margin: 0 6px 0 auto; padding: 0; border: 0; gap: 2px; }
  .nav .lang-switch { display: none; }
}

/* ---------- Menu: links that open Proteqpack Supplies ----------
   Desktop: a divider and a small "Proteqpack Supplies ↗" label above the two links, plus a card on hover/focus.
   Folded menu: the label becomes a sub-heading "On Proteqpack Supplies". */
.nav-ext { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0 4px 0 6px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.18); }
.nav-ext-label { font-family: var(--head); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light); padding-left: 10px; line-height: 1; white-space: nowrap; }
.nav-ext-label .m { display: none; }
.nav-ext-links { display: flex; }
.nav .nav-ext a { padding: 6px 10px 8px; }
:is(html[lang="nl"], html[lang="fr"]) .nav .nav-ext a { padding: 6px 8px 8px; font-size: .84rem; }
.ext-card { position: absolute; z-index: 60; top: calc(100% + 16px); right: -6px; width: 290px; padding: 16px 18px; border-radius: 14px; background: #fff; color: var(--text); box-shadow: 0 18px 40px rgba(0,19,32,.35); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.ext-card::before { content: ""; position: absolute; top: -7px; right: 40px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.ext-card-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ext-card-brand img:first-child { width: 22px; height: auto; }
.ext-card-brand img:nth-child(2) { width: 96px; height: auto; filter: brightness(.25) saturate(1.4); }
.ext-card-brand em { font-style: normal; font-family: var(--head); font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--blue-deep); }
.ext-card p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--text); text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 400; }
.nav-ext:hover .ext-card, .nav-ext:focus-within .ext-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ext-card { transition: none; } }

@media (max-width: 1320px) {
  .nav-ext { margin: 10px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); align-items: stretch; }
  .nav-ext-label { font-size: .7rem; padding: 0 6px 4px; }
  .nav-ext-label .d { display: none; }
  .nav-ext-label .m { display: inline; }
  .nav-ext-links { flex-direction: column; }
  .nav .nav-ext a, :is(html[lang="nl"], html[lang="fr"]) .nav .nav-ext a { padding: 14px 6px; font-size: .92rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .ext-card { display: none; }
}
@media (max-width: 600px) {
  .site-header .wrap { gap: 6px; }
  .site-header .brand { flex: 0 1 auto; min-width: 0; }
  .nav-toggle { padding: 10px 2px 10px 6px; }
  .lang-top { margin-right: 2px; }
}

/* ---------- PPWR bar above the header (every page): straight to the DoC review app ---------- */
.ppwr-bar { background: linear-gradient(90deg, var(--blue-dark), var(--blue-deep)); color: #e8f2fb; font-size: .9rem; }
.ppwr-bar .wrap { width: min(1280px, 100% - 32px); display: flex; align-items: center; justify-content: center; gap: 10px 18px; padding: 8px 0; flex-wrap: wrap; }
.ppwr-bar p { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ppwr-tag { flex: none; font-family: var(--head); font-size: .68rem; letter-spacing: .14em; color: var(--navy); background: #e3a21a; padding: 3px 8px; border-radius: 4px; }
.ppwr-long strong { color: #fff; font-weight: 600; }
.ppwr-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--head); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy) !important; background: #fff; padding: 6px 14px; border-radius: 999px; }
.ppwr-btn:hover { text-decoration: none; background: #dbeeff; }
.ppwr-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .ppwr-long { display: none; }
  .ppwr-bar .wrap { justify-content: space-between; padding: 7px 0; }
}

/* ---------- About: partner overview ---------- */
.ptn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ptn { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.ptn-logo { height: 128px; display: grid; place-items: center; padding: 22px; border-bottom: 1px solid var(--line); background: #fff; }
.ptn-logo img { max-height: 80px; max-width: 78%; width: auto; height: auto; object-fit: contain; }
.ptn-word { background: var(--paper-2); }
.ptn-word span { font-family: var(--head); font-size: 1.5rem; letter-spacing: .06em; color: var(--navy); }
.ptn-body { padding: 18px 20px 20px; }
.ptn-cat { display: block; font-family: var(--head); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.ptn h3 { color: var(--navy); font-size: 1.08rem; margin-bottom: 6px; }
.ptn p { margin: 0; font-size: .92rem; color: var(--text-soft); }
@media (max-width: 1080px) { .ptn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ptn-grid { grid-template-columns: 1fr; } .ptn-logo { height: 110px; } }

/* PPWR bar: "coming soon" wording; short version on phones */
.ppwr-short, .ppwr-btn-short { display: none; }
@media (max-width: 760px) {
  .ppwr-short { display: inline; color: #fff; font-weight: 600; font-size: .86rem; }
  .ppwr-btn-long { display: none; }
  .ppwr-btn-short { display: inline; }
}
@media (max-width: 760px) {
  .ppwr-bar .wrap { flex-wrap: nowrap; gap: 10px; }
  .ppwr-bar p { gap: 8px; }
  .ppwr-short { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ppwr-tag { font-size: .62rem; padding: 2px 6px; }
  .ppwr-btn { font-size: .68rem; padding: 5px 10px; }
}