/* One illustration language: graphite, forest green, champagne and pearl.
 * Diagrams explain principles, never simulated measurements or photography. */
body.dhd .learning-graphic{
 --lg-gold:#D8C498;--lg-green:#365D4B;--lg-pearl:#E8EBE6;
 position:relative;isolation:isolate;overflow:clip;box-sizing:border-box;
 display:block;min-width:0;max-width:100%;margin:24px 0 32px;padding:24px;
 color:#F5F0E5;background:linear-gradient(137deg,#46504F 0%,#30383B 40%,#1B2523 100%);
 scroll-margin-top:calc(var(--header,94px) + 24px);box-shadow:inset 0 1px 0 #F4ECD91C,inset 1px 0 0 #E8EBE60B,0 10px 30px #06110C14;
 border:1px solid #B9BAA542;border-radius:0;
}
body.dhd .learning-graphic::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 82% 12%,#EEE7D21D,transparent 58%),radial-gradient(ellipse at 9% 92%,#0E201933,transparent 66%);}
body.dhd .learning-graphic .lg-heading{display:flex;flex-direction:column;gap:8px;}
body.dhd .learning-graphic .lg-kicker{font:500 11px/1.4 var(--font-label,Arial);letter-spacing:.14em;color:#D8C498;}
body.dhd .learning-graphic .lg-heading strong{font:500 clamp(19px,1.7vw,25px)/1.3 var(--font-display,serif);letter-spacing:-.015em;color:#F5F0E5;text-wrap:balance;}
body.dhd .learning-graphic .lg-diagram-window{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;scrollbar-color:var(--lg-gold) transparent;scrollbar-width:thin;}
body.dhd .learning-graphic .lg-diagram{display:block;width:100%;min-width:504px;height:auto;max-width:600px;max-height:none;overflow:visible;margin:12px auto 4px;}
body.dhd .learning-graphic svg{font-family:var(--sans,Arial);}
body.dhd .learning-graphic svg text{fill:var(--lg-label-ink,#E8EBE6);font-family:var(--sans,Arial);font-weight:400;letter-spacing:0;text-transform:none;}
body.dhd .learning-graphic .lg-label{fill:var(--lg-label-ink,#E8EBE6);font-size:15px;}
body.dhd .learning-graphic .lg-muted{fill:#D8DDDA;font-size:13px;}
body.dhd .learning-graphic .lg-line{fill:none;stroke:#D8C498;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
body.dhd .learning-graphic .lg-shape{fill:#365D4B55;stroke:#D8C498;stroke-width:2.6;stroke-linejoin:round;}
body.dhd .learning-graphic .lg-gold{fill:#D8C498;}
body.dhd .learning-graphic .lg-ink{fill:#17251F;}
body.dhd .learning-graphic .lg-caption{font:400 15px/1.6 var(--sans,Arial);color:#E8EBE6;margin:12px 0 16px;max-width:65ch;text-align:left;}
body.dhd .learning-graphic .lg-pan-hint{font:400 13px/1.5 var(--sans,Arial);color:inherit;margin:8px 0 0;}
body.dhd .learning-graphic .lg-expand{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:44px;margin:0;padding:10px 16px;border:1px solid var(--dhd-gold,#D8C498);border-radius:0;background:transparent;color:inherit;font:600 16px/1.4 var(--sans,Arial);cursor:pointer;}
body.dhd .learning-graphic .lg-expand:hover{background:#D8C4981A;}
body.dhd :is(.lg-expand,.lg-diagram-window):focus-visible{outline:2px solid currentColor;outline-offset:4px;}
body.dhd .learning-graphic [hidden]{display:none!important;}
body.dhd .learning-graphic .lg-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;}
/* Static diagrams are complete, including with JavaScript unavailable.
 * Visibility pauses the exact cue; returning does not replay finished diagrams. */
body.dhd :is(.learning-graphic,.process-flow).is-motion-paused *{animation-play-state:paused!important;}
.learning-graphic :is(.lg-flow,.lg-rise,.lg-reveal,.lg-draw,.lg-turn){transform-box:fill-box;transform-origin:center;}

.learning-graphic.is-playing .lg-flow{animation:lg-flow 2.1s cubic-bezier(.22,.7,.25,1) var(--lg-delay,0ms) both;}
.learning-graphic.is-playing .lg-rise{animation:lg-rise 1.7s cubic-bezier(.22,.7,.25,1) var(--lg-delay,0ms) both;}
.learning-graphic.is-playing .lg-reveal{animation:lg-reveal 1.6s ease var(--lg-delay,0ms) both;}
.learning-graphic.is-playing :is(.lg-draw:is(path,line,polyline),.lg-draw :is(path,line,polyline)){stroke-dasharray:1;animation:lg-draw 1.5s cubic-bezier(.2,.7,.3,1) var(--lg-delay,0ms) both;}
.learning-graphic.is-playing .lg-turn{animation:lg-turn 2.1s cubic-bezier(.22,.7,.25,1) var(--lg-delay,0ms) both;}
@keyframes lg-flow{0%{transform:translateX(calc(-1 * var(--lg-travel,24px)));opacity:.2}35%{opacity:1}100%{transform:translateX(0);opacity:1}}
@keyframes lg-rise{0%{transform:translateY(12px);opacity:.2}100%{transform:translateY(0);opacity:1}}
.learning-graphic.is-playing :is(.lg-reveal,.lg-rise):has(text){animation-name:lg-label-arrival;}
@keyframes lg-label-arrival{from{transform:translateY(4px)}to{transform:translateY(0)}}
@keyframes lg-reveal{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes lg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lg-turn{0%{transform:rotate(-90deg);opacity:.3}100%{transform:rotate(0);opacity:1}}
body.dhd .learning-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:center;padding:32px;}
body.dhd .learning-wide .lg-heading{grid-column:2;grid-row:1;align-self:end;}
body.dhd .learning-wide .lg-diagram-window{grid-column:1;grid-row:1 / span 2;}
body.dhd .learning-wide figcaption{grid-column:2;grid-row:2;align-self:start;}
body.dhd .ed-test .learning-graphic{padding:18px;margin:22px 0;}
body.dhd .ed-test .learning-graphic .lg-heading strong{font-size:18px;}
body.dhd .process-stage>.learning-graphic{margin:24px clamp(18px,4vw,64px) 32px;}
body.dhd .product-information>.learning-graphic{max-width:1100px;}
body.dhd .ed-native-value>.learning-graphic{margin:0 clamp(20px,6vw,96px) 36px;}
body.dhd .ed-care>.learning-graphic{grid-column:1 / -1;}
@media(max-width:760px){
 body.dhd .learning-graphic{padding:18px;margin:20px 0 28px;}
 body.dhd .learning-wide{display:block;padding:22px;}
 body.dhd .learning-graphic .lg-diagram{max-height:none;}
 body.dhd .learning-graphic .lg-caption{font-size:15px;}
 body.dhd .learning-graphic .lg-heading strong{font-size:21px;}
 body.dhd .process-stage>.learning-graphic{margin:20px 16px 28px;}
}
@media(prefers-reduced-motion:reduce){.learning-graphic *{animation:none!important;transition:none!important;}}
@media print{body.dhd .learning-graphic{break-inside:avoid;background:#27322D!important;print-color-adjust:exact;-webkit-print-color-adjust:exact;}.learning-graphic :is(.lg-expand,.lg-pan-hint){display:none!important;}.learning-graphic *{animation:none!important;}body.dhd .learning-graphic .lg-diagram-window{overflow:visible;}body.dhd .learning-graphic .lg-diagram{min-width:0;}}

/* Readable larger view. It is a static copy, never a second motion controller.
 * At 630px the smallest 11-unit label is 16.5px. Native scrolling preserves
 * the whole factual diagram instead of cropping or shrinking its text. */
body.dhd:has(#learning-diagram-dialog[open]){overflow:hidden;}
body.dhd dialog#learning-diagram-dialog{box-sizing:border-box;width:min(980px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));margin:auto;padding:20px;border:1px solid var(--dhd-gold,#D8C498);border-radius:0;background:var(--dhd-glass-dark,#303632);color:#F5F0E5;box-shadow:var(--dhd-glass-shadow,0 20px 60px #0005);-webkit-backdrop-filter:var(--dhd-glass-filter,none);backdrop-filter:var(--dhd-glass-filter,none);overflow:hidden;}
body.dhd dialog#learning-diagram-dialog:not([open]){display:none!important;}
body.dhd dialog#learning-diagram-dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;}
body.dhd dialog#learning-diagram-dialog::backdrop{background:#101713A8;}
body.dhd .lg-dialog-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;}
body.dhd .lg-dialog-toolbar h2{min-width:0;margin:0;color:inherit;font:500 clamp(21px,2.5vw,29px)/1.3 var(--font-display,serif);overflow-wrap:anywhere;}
body.dhd .lg-dialog-toolbar button{flex:0 0 auto;position:static;display:flex;gap:12px;align-items:center;min-width:44px;min-height:44px;padding:8px 12px;margin:0;border:1px solid var(--dhd-gold,#D8C498);border-radius:0;background:transparent;color:inherit;font:600 16px/1.4 var(--sans,Arial);cursor:pointer;}
body.dhd .lg-dialog :is(button,.lg-dialog-scroll):focus-visible{outline:2px solid var(--dhd-gold,#D8C498);outline-offset:3px;}
body.dhd .lg-dialog-hint{margin:0;font:400 14px/1.45 var(--sans,Arial);color:inherit;}
body.dhd .lg-dialog-scroll{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;scrollbar-color:var(--dhd-gold,#D8C498) transparent;scrollbar-width:thin;border-block:1px solid var(--dhd-line,#D8C49855);}
body.dhd .lg-dialog .lg-expanded{width:100%;min-width:630px;max-width:none;margin:0;padding:12px 0;border:0;border-radius:0;box-shadow:none;background:transparent;}
body.dhd .lg-dialog .lg-expanded::before{display:none;}
body.dhd .lg-dialog .lg-expanded .lg-diagram{width:100%;min-width:630px;max-width:none;height:auto;max-height:none;margin:0;}
body.dhd .lg-dialog .lg-expanded *{animation:none!important;transition:none!important;}
body.dhd .lg-dialog-caption{min-height:0;max-height:22dvh;overflow:auto;margin:0;color:inherit;font:400 16px/1.5 var(--sans,Arial);}
@media(max-width:600px){body.dhd dialog#learning-diagram-dialog{padding:14px;width:calc(100vw - 16px);max-width:calc(100vw - 16px);}body.dhd .lg-dialog-toolbar{gap:10px;}body.dhd .lg-dialog-toolbar h2{font-size:21px;}}
@media(prefers-reduced-transparency:reduce){body.dhd dialog#learning-diagram-dialog{background:var(--dhd-primary,#343633);-webkit-backdrop-filter:none;backdrop-filter:none;}}
@media(forced-colors:active){body.dhd dialog#learning-diagram-dialog{color:CanvasText;}body.dhd .lg-dialog .lg-expanded{forced-color-adjust:auto;color:CanvasText;}body.dhd .lg-dialog .lg-expanded svg text{fill:CanvasText;}body.dhd .lg-dialog-toolbar button{color:ButtonText;background:ButtonFace;border-color:ButtonText;}}
@media print{body.dhd dialog#learning-diagram-dialog{display:none!important;}}

/* Directional studio finish: matte bodies, satin edges, local contact shadows.
 * The labels and connecting lines remain outside material/filter treatment. */
body.dhd .learning-graphic .lg-diagram .lg-shape,
body.dhd .learning-graphic svg :is(path,rect,circle,ellipse,polygon)[fill="#365D4B"],
body.dhd .learning-graphic svg :is(path,rect,circle,ellipse,polygon)[fill="#33483D"],
body.dhd .learning-graphic svg :is(path,rect,circle,ellipse,polygon)[fill="#52664E"]{fill:var(--lg-moss,#526E57);stroke:var(--lg-edge,#D8C498);stroke-width:2.6;filter:var(--lg-depth,none);}
body.dhd .learning-graphic svg :is(path,rect,circle,ellipse,polygon)[fill="#171B1D"],
body.dhd .learning-graphic svg :is(path,rect,circle,ellipse,polygon)[fill="#263932"],
body.dhd .learning-graphic svg :is(path,rect,circle,ellipse,polygon)[fill="#353C40"]{fill:var(--lg-graphite,#26312C);}
body.dhd .learning-graphic .lg-diagram .lg-label-panel{fill:var(--lg-label-surface,#34483D);}
body.dhd .learning-graphic .lg-diagram .lg-gold,
body.dhd .learning-graphic svg :is(path,rect,circle,ellipse,polygon)[fill="#D8C498"]{fill:var(--lg-satin,#D8C498);}
body.dhd .learning-graphic .lg-diagram .lg-ink{fill:var(--lg-pore,#17251F);}
/* A shared minimum reaches the story/care paths with inherited or inline
 * strokes too. Filled-only geometry and labels acquire no new stroke. */
body.dhd .learning-graphic .lg-artwork :where(path,line,polyline,polygon,rect,circle,ellipse):not(:where([stroke="none"])){stroke-width:2.2;}
body.dhd .learning-graphic .lg-diagram .lg-line{stroke:var(--lg-edge,#D8C498);stroke-width:2.2;}
body.dhd .learning-graphic svg text{paint-order:stroke;stroke:none;filter:none;}
body.dhd .ingredient-window .iw-outline{fill:var(--lg-moss,#3F5348);stroke:var(--lg-edge,#D8C498);stroke-width:2.6;filter:var(--lg-depth,none);}
body.dhd .ingredient-window .iw-section-edge{stroke:#D8C49868;stroke-width:1.8;}
body.dhd .ingredient-window .iw-pore{fill:var(--lg-pore,#19251F);stroke:#95AA9766;}
body.dhd .ingredient-window :is(.iw-oil,.iw-drop){fill:var(--lg-satin,#D8C498);}
body.dhd .ingredient-window .iw-drop{filter:var(--lg-depth,none);}

body.dhd .learning-wide .lg-heading strong{font-size:clamp(24px,2.1vw,31px);line-height:1.25;}
body.dhd .learning-wide .lg-caption{font-size:clamp(16px,1.25vw,18px);line-height:1.65;}
@media(max-width:760px){body.dhd .learning-wide .lg-heading strong{font-size:23px;}body.dhd .learning-wide .lg-caption{font-size:16px;}}

/* A satin edge also reaches inherited story strokes; labels stay solid. */
body.dhd .learning-graphic .lg-artwork [stroke="#D8C498"]{stroke:var(--lg-edge,#D8C498);}

/* Dimension is drawn into each object rather than tilting the whole diagram.
 * All illustrations share an upper-right key light, down-left thickness and
 * local contact shadow. Labels, arrows and the complete reading order stay flat. */
body.dhd .learning-graphic .lg-artwork :is(.lg-solid-side,.lg-solid-seam){stroke-linejoin:round;stroke-width:1;filter:none;}
body.dhd .learning-graphic .lg-artwork .lg-solid-side{fill:#15251E;stroke:#101E18;}
body.dhd .learning-graphic .lg-artwork .lg-solid-seam{fill:#536B55;stroke:#263A2D;}
body.dhd .learning-graphic .lg-artwork :is(path,rect,circle,ellipse,polygon):is([fill="#171B1D"],[fill="#263932"],[fill="#353C40"]){filter:var(--lg-depth,none);stroke:var(--lg-edge,#D8C498);}
body.dhd .ingredient-window .iw-ground{fill:#09110C;opacity:.3;}
body.dhd .ingredient-window .iw-solid-side{fill:#26382B;stroke:#8D9C79;stroke-width:1.5;stroke-linejoin:round;}
body.dhd .ingredient-window .iw-outline{filter:var(--lg-depth,none);}
body.dhd .ingredient-window .iw-pore{stroke:#A4AD8270;paint-order:fill stroke;}
body.dhd .ingredient-window::before{background:radial-gradient(ellipse at 85% 12%,#F4EACA18,transparent 52%),radial-gradient(ellipse at 8% 85%,#17372433,transparent 56%);}
/* Service and commerce placements breathe; none interrupt payment controls. */
body.dhd .contact-layout>div>.learning-graphic{margin-top:32px;max-width:620px;}
body.dhd .catalogue>.learning-graphic{margin:48px 0 16px;}
body.dhd .technical-panel>.learning-graphic{margin-top:30px;}
@media(max-width:760px){body.dhd .learning-graphic .lg-artwork .lg-solid-side{stroke-width:.7;}body.dhd .catalogue>.learning-graphic{margin-top:32px;}}

/* A single plant overview complements the stage-by-stage explanations. */
body.dhd .process-flow{scroll-margin-top:calc(var(--header,94px) + 24px);margin:0 clamp(18px,4vw,64px) 36px;padding:clamp(20px,3vw,38px);border:1px solid #D8C49845;background:radial-gradient(ellipse at 82% 0%,#E8DFC514,transparent 65%),linear-gradient(135deg,#3B4543,#1E2926);box-shadow:inset 0 1px #F4EBD51A;isolation:isolate;color:#E8EBE6;}
body.dhd .process-flow :is(h2,h3){margin:0 0 12px;font:500 clamp(25px,2.4vw,36px)/1.2 var(--font-display);color:#F4F0E5;}
body.dhd .process-flow figure{margin:0;}
body.dhd .process-flow .pf-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#D8C49866 #1C2825;scrollbar-width:thin;padding-bottom:12px;}
body.dhd .process-flow .pf-map{width:100%;height:auto;min-width:1000px;display:block;overflow:visible;}
body.dhd .process-flow :is(figcaption,.pf-intro){max-width:82ch;font:400 14px/1.6 var(--sans);color:#D2DAD3;}
body.dhd .process-flow figcaption{margin-top:16px;}
body.dhd .process-flow svg text{font-family:var(--sans);fill:var(--lg-label-ink,#E8EBE6);stroke:none;letter-spacing:0;}
body.dhd .process-flow svg .process-nav-icon{width:auto;max-width:none;margin:0;}
body.dhd .process-flow :is(.pf-flow,.pf-steam,.pf-water){stroke-linecap:round;stroke-dasharray:1 8;fill:none;}
body.dhd .process-flow .pf-flow{stroke:#D8C498;stroke-width:3;}
body.dhd .process-flow .pf-steam{stroke:#E8EBE6;stroke-width:2.2;}
body.dhd .process-flow .pf-water{stroke:#9BB8AE;stroke-width:2.2;}
body.dhd .process-flow.is-flowing :is(.pf-flow,.pf-steam,.pf-water){animation:pf-flow-dots 2.4s linear 2;}
body.dhd .process-flow.is-flowing .pf-steam{animation-duration:3.2s;}
body.dhd .process-flow.is-flowing .pf-water{animation-duration:3.6s;}
body.dhd .process-flow.is-flowing .process-nav-icon *{animation-iteration-count:2;}
body.dhd .process-flow.is-flowing .process-nav-icon{--pci-turn:pci-turn;--pci-flow:pci-flow;--pci-drop:pci-drop;--pci-heat:pci-heat;--pci-belt:pci-belt;}
@keyframes pf-flow-dots{to{stroke-dashoffset:-36}}
@media(max-width:760px){body.dhd .process-flow{margin:0 16px 28px;padding:22px 16px;}body.dhd .process-flow .pf-map{min-width:1050px;}}
@media(prefers-reduced-motion:reduce){body.dhd .process-flow *{animation:none!important;transition:none!important;}}
@media print{body.dhd .process-flow .pf-map{min-width:0;}body.dhd .process-flow .pf-scroll{overflow:visible;}body.dhd .process-flow *{animation:none!important;}}

/* The active machine steps into focus; the rest keep their place quietly.
 * Transforms and opacity do the emphasis without reflow or constant JS work. */
body.dhd .dhd-process.process-enhanced .process-step .process-nav-icon{transform-origin:50% 56%;transition:transform 680ms cubic-bezier(.2,.82,.2,1.12),opacity 420ms ease;}
body.dhd .dhd-process.process-enhanced .process-step[aria-selected="false"] .process-nav-icon{opacity:.38;transform:translate3d(0,3px,0) scale(.84);--pci-turn:none;--pci-flow:none;--pci-drop:none;--pci-heat:none;--pci-belt:none;}
body.dhd .dhd-process.process-enhanced .process-step[aria-selected="true"] .process-nav-icon{opacity:1;transform:translate3d(0,-3px,0) scale(1.25);}
body.dhd .dhd-process.process-enhanced .process-step[aria-selected="false"] .process-nav-icon *{animation-name:none;}
body.dhd .dhd-process.process-enhanced .process-step[aria-selected="false"] .process-step-name{opacity:.72;}
body.dhd .process-flow .pf-machine-focus{transform-box:fill-box;transform-origin:center;transition:transform 680ms cubic-bezier(.2,.82,.2,1.12),opacity 450ms ease;}
body.dhd .process-flow .pf-focus-ring{opacity:0;stroke-width:1;transition:opacity 500ms ease;}
body.dhd .process-flow.has-current-stage .pf-stage:not(.is-current) .pf-machine-focus{opacity:.42;transform:scale(.89);}
body.dhd .process-flow.has-current-stage .pf-stage:not(.is-current) .process-nav-icon *{animation-name:none;}
body.dhd .process-flow.has-current-stage .pf-stage.is-current .pf-machine-focus{opacity:1;transform:scale(1.22);}
body.dhd .process-flow.has-current-stage .pf-stage.is-current .pf-focus-ring{opacity:.48;}
body.dhd .process-flow.has-current-stage .pf-stage.is-current>.pf-label{fill:#F6E8BC;font-weight:600;}
@media(hover:hover) and (pointer:fine){body.dhd .dhd-process.process-enhanced .process-step[aria-selected="false"]:is(:hover,:focus-visible) .process-nav-icon{opacity:.74;transform:scale(.95);}}
@media(prefers-reduced-motion:reduce){body.dhd .dhd-process.process-enhanced .process-step .process-nav-icon,body.dhd .process-flow .pf-machine-focus,body.dhd .process-flow .pf-focus-ring{transition:none!important;}}
@media print{body.dhd .dhd-process .process-nav-icon,body.dhd .process-flow.has-current-stage .pf-stage .pf-machine-focus{opacity:1!important;transform:none!important;}}

/* The process grew from nine to eleven stages. Keep one continuous rail rather
 * than letting the last two machines wrap into an accidental second row. */
body.dhd .dhd-editorial .dhd-process .process-track{display:flex;min-width:100%;width:max-content;align-items:stretch;}
body.dhd .dhd-editorial .dhd-process .process-step{flex:1 0 116px;}
body.dhd .dhd-process.process-enhanced .process-step[aria-selected="true"] .process-nav-icon{transition-delay:60ms;}