.packaging-page{
  --motion-fast:220ms;
  --motion-medium:420ms;
  --motion-slow:650ms;
  --motion-ease:cubic-bezier(.2,.7,.2,1);
}

/* Hero: one calm entrance, then only restrained response. */
.packaging-showcase-copy{border-left:0}
.packaging-showcase-copy:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(184,142,67,.48);transform-origin:top;transition:transform var(--motion-medium) var(--motion-ease)}
.packaging-motion-ready .packaging-showcase-copy:before{transform:scaleY(0)}
.packaging-motion-ready .packaging-showcase-copy>.series-kicker,
.packaging-motion-ready .packaging-showcase-copy>h1,
.packaging-motion-ready .packaging-showcase-accent,
.packaging-motion-ready .packaging-showcase-lede,
.packaging-motion-ready .packaging-showcase-actions,
.packaging-motion-ready .packaging-asset{opacity:0;transform:translateY(12px)}
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-showcase-copy:before{transform:scaleY(1);transition-delay:250ms}
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-showcase-copy>.series-kicker,
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-showcase-copy>h1,
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-showcase-accent,
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-showcase-lede,
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-showcase-actions,
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-asset{opacity:1;transform:translateY(0);transition:opacity var(--motion-medium) var(--motion-ease),transform var(--motion-medium) var(--motion-ease),box-shadow 360ms var(--motion-ease)}
.packaging-showcase-hero.is-entered .packaging-showcase-copy>.series-kicker{transition-delay:40ms}
.packaging-showcase-hero.is-entered .packaging-showcase-copy>h1{transition-delay:120ms}
.packaging-showcase-hero.is-entered .packaging-showcase-accent{transition-delay:220ms}
.packaging-showcase-hero.is-entered .packaging-showcase-lede{transition-delay:300ms}
.packaging-showcase-hero.is-entered .packaging-showcase-actions{transition-delay:390ms}
.packaging-showcase-hero.is-entered .packaging-asset-primary{transition-delay:430ms}
.packaging-showcase-hero.is-entered .packaging-asset-dropper{transition-delay:500ms}
.packaging-showcase-hero.is-entered .packaging-asset-pump{transition-delay:550ms}
.packaging-showcase-hero.is-entered .packaging-asset-carton{transition-delay:600ms}
.packaging-showcase-hero.is-entered .packaging-asset-gift{transition-delay:650ms}
.packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-asset{transform:translate3d(var(--shift-x,0),var(--shift-y,0),0)}
@media (hover:hover) and (pointer:fine){
  .packaging-motion-ready .packaging-showcase-hero.is-entered .packaging-asset:not(.packaging-asset-primary):hover{transform:translate3d(var(--shift-x,0),calc(var(--shift-y,0px) - 3px),0) scale(1.015);box-shadow:0 34px 60px rgba(61,48,28,.2),0 9px 20px rgba(61,48,28,.1)}
}

/* Series selector and selected showcase. */
.packaging-page .series-selector{transition:transform 360ms var(--motion-ease),box-shadow 360ms var(--motion-ease),border-color 360ms var(--motion-ease)}
.packaging-page .series-selector img,.packaging-page .series-shade,.packaging-page .series-copy strong,.packaging-page .series-arrow{transition:transform 420ms var(--motion-ease),filter 420ms var(--motion-ease),background 420ms var(--motion-ease),color 320ms ease}
.packaging-page .series-selector:not(.is-selected) img{filter:saturate(.82) contrast(.98) brightness(.96)}
.packaging-page .series-selector.is-selected{border-color:rgba(222,190,120,.92);box-shadow:0 24px 58px rgba(8,48,39,.16),inset 0 -2px 0 #d0ab62}
@media (hover:hover) and (pointer:fine){
  .packaging-page .series-selector:hover{transform:translateY(-3px)}
  .packaging-page .series-selector:hover img{transform:scale(1.018)}
  .packaging-page .series-selector:hover .series-shade{background:linear-gradient(180deg,rgba(4,33,27,.02),rgba(4,33,27,.22) 38%,rgba(2,32,26,.94) 100%)}
  .packaging-page .series-selector:hover .series-copy strong{transform:translateY(-3px)}
  .packaging-page .series-selector:hover .series-arrow{transform:translate(3px,-3px)}
}
.packaging-page .series-detail{transition:opacity 145ms ease,transform 145ms var(--motion-ease)}
.packaging-page .series-detail.is-changing{opacity:0;transform:translateY(0)}
.packaging-page .series-detail.is-entering{opacity:0;transform:translateY(8px)}
.packaging-page .series-detail:not(.is-changing):not(.is-entering){transition-duration:340ms}
.packaging-detail-visual img{transition:transform 420ms var(--motion-ease),filter 420ms ease}
.direction-matrix article{position:relative;isolation:isolate;transition:color 320ms ease,background 320ms ease,padding 320ms var(--motion-ease)}
.direction-matrix article:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#c39a4f;transform:scaleX(0);transform-origin:left;transition:transform 340ms var(--motion-ease)}
@media (hover:hover) and (pointer:fine){
  .packaging-detail:has(.direction-matrix article:hover) .packaging-detail-visual img{transform:scale(1.007)}
  .direction-matrix article:hover{padding-inline:8px;background:rgba(196,156,80,.045)}
  .direction-matrix article:hover:after{transform:scaleX(1)}
  .direction-matrix article:hover strong,.direction-matrix article:hover p{color:#0d3b31}
}

/* Component library: consistent editorial imagery and near-flat hover. */
.component-grid article{position:relative;transition:transform 340ms var(--motion-ease),background 340ms ease}
.component-grid figure{aspect-ratio:4/3;min-height:0}
.component-grid img{filter:saturate(.76) contrast(1.02) brightness(1.01);transition:transform 500ms var(--motion-ease),filter 400ms ease}
.component-grid article p{opacity:.72;transition:opacity 320ms ease,border-color 320ms ease}
.component-arrow{position:absolute;right:28px;top:29px!important;font-size:18px!important;letter-spacing:0!important;opacity:0;transform:translate(-3px,3px);transition:opacity 280ms ease,transform 340ms var(--motion-ease)}
.component-grid h3{transition:transform 340ms var(--motion-ease)}
@media (hover:hover) and (pointer:fine){
  .component-grid article:hover{transform:translateY(-2px);background:rgba(255,255,255,.5)}
  .component-grid article:hover img{transform:scale(1.015);filter:saturate(.86) contrast(1.025) brightness(1.02)}
  .component-grid article:hover h3{transform:translateY(-2px)}
  .component-grid article:hover p{opacity:1;border-color:rgba(184,142,67,.34)}
  .component-grid article:hover .component-arrow{opacity:1;transform:translate(0,0)}
}

/* Material and finish: editorial lists controlling abstract surface studies. */
.material-groups>div{position:relative;overflow:hidden;min-height:430px;padding:30px 30px 28px;background:rgba(255,253,248,.5)}
.material-groups>div>span{position:relative;z-index:2;margin-bottom:168px}
.material-groups button{position:relative;z-index:2;width:100%;padding:13px 0;border:0;border-top:1px solid var(--series-line);background:transparent;color:#4e6962;text-align:left;font:400 24px/1.2 var(--serif,Georgia,serif);cursor:pointer;transition:color 300ms ease,padding 340ms var(--motion-ease)}
.material-groups button:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#bd9247;transform:scaleX(0);transform-origin:left;transition:transform 340ms var(--motion-ease)}
.material-groups button[aria-pressed="true"],.material-groups button:hover,.material-groups button:focus-visible{padding-left:10px;color:#0d3b31}
.material-groups button[aria-pressed="true"]:after,.material-groups button:hover:after,.material-groups button:focus-visible:after{transform:scaleX(1)}
.material-groups button:focus-visible{outline:2px solid rgba(184,142,67,.6);outline-offset:3px}
.material-preview,.finish-preview{position:absolute;z-index:1;top:58px;left:30px;right:30px;height:120px;border:1px solid rgba(255,255,255,.65);overflow:hidden;transition:background 420ms var(--motion-ease),box-shadow 420ms ease,filter 420ms ease}
.material-preview:after,.finish-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.58),transparent 35%,rgba(255,255,255,.18) 62%,transparent);opacity:.72}
.material-preview[data-material-preview="glass"]{background:radial-gradient(circle at 68% 22%,rgba(255,255,255,.82),transparent 24%),linear-gradient(135deg,rgba(215,230,223,.8),rgba(255,255,255,.28));box-shadow:inset 0 0 36px rgba(255,255,255,.7)}
.material-preview[data-material-preview="plastic"]{background:radial-gradient(circle at 30% 70%,rgba(225,205,170,.38),transparent 34%),linear-gradient(145deg,rgba(247,239,223,.82),rgba(213,220,208,.5));filter:saturate(.7)}
.material-preview[data-material-preview="metal-components"]{background:linear-gradient(110deg,#a7aaa7,#eef0ed 28%,#a1a5a1 52%,#f2eee5 74%,#979b98);box-shadow:inset 0 0 28px rgba(13,59,49,.16)}
.finish-preview[data-finish-preview="printing"]{background:repeating-linear-gradient(90deg,rgba(13,59,49,.08) 0 1px,transparent 1px 18px),linear-gradient(135deg,#f7f0e2,#ded1bb)}
.finish-preview[data-finish-preview="color---pantone-direction"]{background:linear-gradient(90deg,#123e34 0 25%,#c5a05c 25% 50%,#d9caba 50% 75%,#f4efe4 75%)}
.finish-preview[data-finish-preview="carton"]{background:linear-gradient(25deg,transparent 46%,rgba(152,112,48,.18) 47% 49%,transparent 50%),linear-gradient(145deg,#e8d8bb,#f7efe1)}
.finish-preview[data-finish-preview="gift-box-presentation"]{background:linear-gradient(135deg,#f4ead8 0 48%,#d8bd85 49% 51%,#17483c 52%)}

/* Scroll orchestration: one pass only. */
.packaging-motion-ready .motion-section .series-section-head,
.packaging-motion-ready .material-direction .material-lead,
.packaging-motion-ready .material-direction .material-groups,
.packaging-motion-ready .component-library .component-grid,
.packaging-motion-ready .packaging-flow ol,
.packaging-motion-ready .packaging-flow .flow-manufacturing-link,
.packaging-motion-ready .packaging-cta .series-kicker,
.packaging-motion-ready .packaging-cta h2 span,
.packaging-motion-ready .packaging-cta-copy{opacity:0;transform:translateY(16px);transition:opacity var(--motion-medium) var(--motion-ease),transform var(--motion-medium) var(--motion-ease)}
.packaging-motion-ready .motion-section.is-motion-visible .series-section-head,
.packaging-motion-ready .material-direction.is-motion-visible .material-lead,
.packaging-motion-ready .material-direction.is-motion-visible .material-groups,
.packaging-motion-ready .component-library.is-motion-visible .component-grid,
.packaging-motion-ready .packaging-flow.is-motion-visible ol,
.packaging-motion-ready .packaging-flow.is-motion-visible .flow-manufacturing-link,
.packaging-motion-ready .packaging-cta.is-motion-visible .series-kicker,
.packaging-motion-ready .packaging-cta.is-motion-visible h2 span,
.packaging-motion-ready .packaging-cta.is-motion-visible .packaging-cta-copy{opacity:1;transform:translateY(0)}
.packaging-motion-ready .material-direction .material-groups{transition-delay:80ms}
.engineering-grid,.packaging-flow ol{position:relative;border-top:0}
.engineering-grid:before,.packaging-flow ol:before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:1px;background:rgba(219,190,128,.52);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-slow) var(--motion-ease)}
.packaging-flow ol:before{background:rgba(13,59,49,.3)}
.packaging-motion-ready .engineering-grid article,.packaging-motion-ready .packaging-flow li{opacity:0;transform:translateY(12px);transition:opacity var(--motion-medium) var(--motion-ease),transform var(--motion-medium) var(--motion-ease)}
.packaging-engineering.is-motion-visible .engineering-grid:before,.packaging-flow.is-motion-visible ol:before{transform:scaleX(1)}
.packaging-motion-ready .packaging-engineering.is-motion-visible .engineering-grid article,.packaging-motion-ready .packaging-flow.is-motion-visible li{opacity:1;transform:translateY(0);transition-delay:calc(150ms + var(--motion-order,0) * 90ms)}
.engineering-grid article{position:relative;overflow:hidden;transition:background 340ms ease}
.engineering-grid article:after{content:"";position:absolute;inset:20% 5% -30%;background:radial-gradient(circle,rgba(201,164,91,.11),transparent 68%);opacity:0;transition:opacity 340ms ease}
.engineering-grid article span,.engineering-grid article h3{transition:color 300ms ease,transform 340ms var(--motion-ease)}
@media (hover:hover) and (pointer:fine){
  .engineering-grid article:hover:after{opacity:1}
  .engineering-grid article:hover span{color:#efd28f}
  .engineering-grid article:hover h3{transform:translateY(-2px)}
  .engineering-grid article:hover{box-shadow:inset 1px 0 rgba(225,196,132,.22),inset -1px 0 rgba(225,196,132,.22)}
  .packaging-flow li:hover>span{color:#c19442}
  .packaging-flow li:hover strong{color:#0d3b31}
  .packaging-flow li:hover{box-shadow:inset 0 1px rgba(184,142,67,.4)}
}
.flow-manufacturing-link span,.packaging-cta-actions a span{transition:transform 300ms var(--motion-ease)}
.flow-manufacturing-link,.packaging-cta-actions a{position:relative;transition:color 300ms ease}
.flow-manufacturing-link:after,.packaging-cta-actions a:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 360ms var(--motion-ease)}
.flow-manufacturing-link:hover:after,.packaging-cta-actions a:hover:after{transform:scaleX(1)}
.flow-manufacturing-link:hover span,.packaging-cta-actions a:hover span{transform:translateX(3px)}
.packaging-cta{position:relative;isolation:isolate;background:radial-gradient(circle at 78% 24%,rgba(209,174,103,.16),transparent 30%),radial-gradient(circle at 22% 84%,rgba(29,110,86,.24),transparent 38%),linear-gradient(135deg,#032b24,#0a473a);overflow:hidden}
.packaging-cta:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,18,14,.25) 100%)}
.packaging-cta h2 span{display:block}
.packaging-cta h2 span+span{transition-delay:90ms!important}
.packaging-cta-copy{transition-delay:180ms!important}

@media (max-width:780px){
  .packaging-motion-ready .motion-section .series-section-head,.packaging-motion-ready .material-direction .material-lead,.packaging-motion-ready .material-direction .material-groups,.packaging-motion-ready .component-library .component-grid,.packaging-motion-ready .packaging-flow ol,.packaging-motion-ready .packaging-flow .flow-manufacturing-link,.packaging-motion-ready .packaging-cta .series-kicker,.packaging-motion-ready .packaging-cta h2 span,.packaging-motion-ready .packaging-cta-copy{transform:translateY(8px)}
  .material-groups>div{min-height:410px}
  .engineering-grid:before{transform-origin:left}
  .packaging-flow ol:before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .packaging-flow.is-motion-visible ol:before{transform:scaleY(1)}
}

@media (max-width:430px){
  .material-groups>div{min-height:395px;padding:24px 22px}
  .material-groups>div>span{margin-bottom:158px}
  .material-preview,.finish-preview{left:22px;right:22px;top:54px;height:112px}
  .material-groups button{font-size:21px}
}

@media (prefers-reduced-motion:reduce){
  .packaging-page *,
  .packaging-page *:before,
  .packaging-page *:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .packaging-motion-ready .packaging-showcase-copy>*,
  .packaging-motion-ready .packaging-asset,
  .packaging-motion-ready .motion-section .series-section-head,
  .packaging-motion-ready .material-direction .material-lead,
  .packaging-motion-ready .material-direction .material-groups,
  .packaging-motion-ready .component-library .component-grid,
  .packaging-motion-ready .packaging-engineering .engineering-grid article,
  .packaging-motion-ready .packaging-flow ol,
  .packaging-motion-ready .packaging-flow li,
  .packaging-motion-ready .packaging-flow .flow-manufacturing-link,
  .packaging-motion-ready .packaging-cta .series-kicker,
  .packaging-motion-ready .packaging-cta h2 span,
  .packaging-motion-ready .packaging-cta-copy{opacity:1!important;transform:none!important}
  .packaging-showcase-copy:before,.engineering-grid:before,.packaging-flow ol:before{transform:none!important}
}