/* 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(135deg,#3B4245,#222A2B 72%,#1B2421);
 border:1px solid #D8C49840;border-radius:2px;
}
body.dhd .learning-graphic::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 18% 22%,#D8C4980B,transparent 60%);}
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{display:block;width:100%;height:auto;max-width:600px;max-height:340px;overflow:visible;margin:12px auto 4px;}
body.dhd .learning-graphic svg{font-family:var(--sans,Arial);}
body.dhd .learning-graphic svg text{fill:#E8EBE6;font-family:var(--sans,Arial);font-weight:400;letter-spacing:0;text-transform:none;}
body.dhd .learning-graphic .lg-label{fill:#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-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #D8C49830;padding-top:12px;}
body.dhd .learning-graphic .lg-footer>span{font:400 11px/1.5 var(--sans,Arial);color:#CFD6D0;max-width:30ch;}
body.dhd .learning-graphic .lg-replay{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;min-height:44px;padding:7px 0 7px 12px;border:0;border-radius:0;background:transparent;box-shadow:none;font:500 13px/1.3 var(--sans,Arial);color:#F5F0E5;cursor:pointer;}
body.dhd .learning-graphic .lg-replay span{color:#D8C498;font-size:20px;display:inline-block;transition:transform .35s ease;}
body.dhd .learning-graphic .lg-replay:hover span{transform:rotate(-30deg);}
body.dhd .learning-graphic .lg-replay:focus-visible{outline:2px solid #D8C498;outline-offset:3px;}
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. */
.learning-graphic :is(.lg-flow,.lg-rise,.lg-reveal,.lg-draw,.lg-turn){transform-box:fill-box;transform-origin:center;}
.learning-graphic .lg-draw{transform-origin:left;}
.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 .lg-draw{animation:lg-draw 1.7s 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}}
@keyframes lg-reveal{0%{opacity:.18}100%{opacity:1}}
@keyframes lg-draw{0%{transform:scaleX(.05);opacity:.2}100%{transform:scaleX(1);opacity:1}}
@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{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 .lg-replay{display:none!important;}.learning-graphic *{animation: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{scroll-margin-top:calc(var(--header,94px) + 24px);background:linear-gradient(137deg,#46504F 0%,#30383B 40%,#1B2523 100%);border-color:#B9BAA542;box-shadow:inset 0 1px 0 #F4ECD91C,inset 1px 0 0 #E8EBE60B,0 10px 30px #06110C14;}
body.dhd .learning-graphic::before{background:radial-gradient(ellipse at 20% 10%,#E8E2CA16,transparent 58%),radial-gradient(ellipse at 90% 90%,#18382826,transparent 68%);}
body.dhd :is(.learning-graphic,.ingredient-window)::after{content:"";position:absolute;z-index:-1;inset:-20% -60%;pointer-events:none;background:linear-gradient(113deg,transparent 32%,#F5F0E511 44%,#E8E5D614 49%,transparent 62%);opacity:0;transform:translate3d(-24%,0,0);}
body.dhd .learning-graphic.is-playing::after{animation:lg-studio-light 4.1s cubic-bezier(.22,.65,.3,1) both;}
body.dhd .ingredient-window.is-flowing::after{animation:lg-studio-light 2.4s cubic-bezier(.22,.65,.3,1) both;}
@keyframes lg-studio-light{0%{opacity:0;transform:translate3d(-24%,0,0)}28%{opacity:.7}68%{opacity:.4}100%{opacity:0;transform:translate3d(24%,0,0)}}
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-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);}
@media(prefers-reduced-motion:reduce){body.dhd :is(.learning-graphic,.ingredient-window)::after{animation:none!important;opacity:0;}}
@media print{body.dhd :is(.learning-graphic,.ingredient-window)::after{display:none!important;}}

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::before{background:radial-gradient(ellipse at 82% 12%,#EEE7D21D,transparent 58%),radial-gradient(ellipse at 9% 92%,#0E201933,transparent 66%);}
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:#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 infinite;}
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{--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;}