@font-face {
     font-family: Jost;
     src: url('../fonts/jost/Jost-400-Book.woff2') format('woff2');
     font-weight: 400;
     font-display: swap
}

@font-face {
     font-family: Jost;
     src: url('../fonts/jost/Jost-500-Medium.woff2') format('woff2');
     font-weight: 500;
     font-display: swap
}

@font-face {
     font-family: Jost;
     src: url('../fonts/jost/Jost-600-Semi.woff2') format('woff2');
     font-weight: 600;
     font-display: swap
}

:root {
     --navy: #0c1c35;
     --navy-2: #132c4c;
     --copper: #ae5d2d;
     --copper-dark: #8e431d;
     --cream: #fbfaf8;
     --mist: #f5f6f7;
     --line: #e4e6e8;
     --text: #46505e;
     --white: #fff;
     --shadow: 0 12px 35px rgba(13, 28, 52, .08);
     --radius: 10px
}

*,
*::before,
*::after {
     box-sizing: border-box
}

html {
     scroll-behavior: smooth;
     overflow-x: hidden
}

body {
     margin: 0;
     background: #fff;
     color: var(--text);
     font-family: Jost, Arial, sans-serif;
     font-size: 16px;
     line-height: 1.55;
     -webkit-font-smoothing: antialiased
}

body.menu-open {
     overflow: hidden
}

img {
     display: block;
     max-width: 100%
}

a {
     color: inherit;
     text-decoration: none
}

button {
     font: inherit
}

h1,
h2,
h3,
p {
     margin-top: 0
}

h1,
h2 {
     color: var(--navy);
     font-family: Georgia, 'Times New Roman', serif;
     line-height: 1.08
}

h2 {
     font-size: clamp(2rem, 3vw, 3.1rem);
     margin-bottom: .55rem
}

h3 {
     color: var(--navy);
     line-height: 1.25
}

.shell {
     width: min(1180px, calc(100% - 40px));
     margin-inline: auto
}

.section {
     padding: 76px 0
}

.sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0
}

.skip-link {
     position: fixed;
     left: 16px;
     top: -60px;
     z-index: 999;
     background: var(--white);
     padding: 12px 16px;
     border-radius: 6px;
     color: var(--navy);
     box-shadow: var(--shadow)
}

.skip-link:focus {
     top: 16px
}

.site-header {
     height: 82px;
     background: #fff;
     position: relative;
     z-index: 100;
     border-bottom: 1px solid rgba(12, 28, 53, .07)
}

.nav-wrap {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between
}

.brand img {
     width: 130px;
     height: 58px;
     object-fit: contain
}

.site-menu {
     display: flex;
     align-items: center;
     gap: 32px
}

.site-menu>a {
     font-size: .92rem;
     font-weight: 600;
     color: var(--navy);
     transition: color .2s
}

.site-menu>a:not(.nav-cta):hover {
     color: var(--copper)
}

.site-menu .nav-cta {
     background: var(--copper);
     color: #fff;
     padding: 12px 20px;
     border-radius: 6px
}

.site-menu .nav-cta:hover {
     background: var(--copper-dark)
}

.menu-toggle {
     display: none;
     border: 0;
     background: transparent;
     width: 42px;
     height: 42px;
     padding: 9px;
     cursor: pointer
}

.menu-toggle>span:not(.sr-only) {
     display: block;
     height: 2px;
     background: var(--navy);
     margin: 5px 0;
     transition: .25s
}

.hero-placeholder {
     height: 500px;
     position: relative;
     isolation: isolate;
     overflow: hidden;
     background: linear-gradient(90deg, #10243d 0%, #243b50 50%, #c68c68 100%);
     background-image: linear-gradient(90deg, rgba(8, 24, 44, .82), rgba(8, 24, 44, .08)), url('../image/dairy/dairy-banner.jpg');
     background-size: cover;
     background-position: center 48%
}

.hero-shade {
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at 72% 36%, transparent 0 22%, rgba(8, 23, 40, .18) 75%);
     z-index: -1
}

.hero-content {
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     color: #fff
}

.hero-content h1 {
     max-width: 720px;
     color: #fff;
     font-size: clamp(2.7rem, 5vw, 5rem);
     margin: 8px 0 16px
}

.hero-content>p:not(.eyebrow) {
     max-width: 520px;
     font-size: 1.12rem;
     margin-bottom: 27px
}

.banner-note {
     position: absolute;
     right: 24px;
     bottom: 20px;
     border: 1px dashed rgba(255, 255, 255, .6);
     border-radius: 99px;
     color: rgba(255, 255, 255, .84);
     font-size: .75rem;
     letter-spacing: .08em;
     padding: 6px 12px
}

.eyebrow {
     margin-bottom: 8px;
     color: var(--copper);
     font-size: .72rem;
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: .26em;
     font-weight: 600
}

.eyebrow.light {
     color: #f1b28c
}

.button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     min-height: 46px;
     border-radius: 6px;
     padding: 12px 22px;
     font-weight: 600;
     font-size: .9rem;
     transition: transform .2s, background .2s, box-shadow .2s
}

.button:hover {
     transform: translateY(-2px)
}

.button-copper {
     color: #fff;
     background: var(--copper);
     box-shadow: 0 9px 22px rgba(174, 93, 45, .22)
}

.button-copper:hover {
     background: var(--copper-dark);
     box-shadow: 0 13px 24px rgba(174, 93, 45, .3)
}

.calendar-page .hero-placeholder {
     background-image:  url('../image/calender/cal-banner.jpg');
     background-position: center 48%
}

.calendar-page .story-image img {
     object-position: 65% center
}

.calendar-page .product-card:nth-child(1) .image-frame img {
     object-position: 70% center
}

.calendar-page .product-card:nth-child(2) .image-frame img {
     object-position: center
}

.calendar-page .product-card:nth-child(3) .image-frame img {
     object-position: 76% center
}

.calendar-page .product-card:nth-child(4) .image-frame img {
     object-position: 62% center
}

.benefit-bar {
     padding: 0 0 12px;
     background: #fff
}

.benefit-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     background: linear-gradient(90deg, #f5f5f5, #fbfbfb);
     border: 1px solid #f0f0f0;
     border-radius: 0 0 9px 9px;
     box-shadow: 0 10px 32px rgba(20, 30, 45, .06)
}

.benefit {
     min-height: 100px;
     display: flex;
     align-items: center;
     gap: 18px;
     padding: 20px 27px;
     position: relative
}

.benefit:not(:last-child)::after {
     content: '';
     position: absolute;
     right: 0;
     height: 46%;
     width: 1px;
     background: #dcdfe3
}

.benefit>i {
     font-size: 2rem;
     color: var(--copper);
     width: 38px;
     text-align: center
}

.benefit h2 {
     font: 600 .88rem/1.25 Jost, Arial, sans-serif;
     margin: 0 0 3px;
     color: var(--navy)
}

.benefit p {
     margin: 0;
     font-size: .73rem;
     color: #6f7782
}

.section-heading {
     text-align: center;
     margin: 0 auto 30px
}

.section-heading>p:last-child {
     margin: .45rem auto 0;
     max-width: 650px;
     color: #707985
}

.product-grid,
.occasion-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px
}

.product-card,
.occasion-card {
     border: 1px solid var(--line);
     border-radius: var(--radius);
     background: #fff;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(15, 35, 58, .05);
     transition: transform .35s, box-shadow .35s
}

.product-card:hover,
.occasion-card:hover {
     transform: translateY(-7px);
     box-shadow: var(--shadow)
}

.image-frame {
     height: 235px;
     background: #f2f1ef;
     overflow: hidden
}

.image-frame img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .6s
}

.product-card:nth-child(2) .image-frame img {
     object-position: 56% center
}

.product-card:nth-child(3) .image-frame img {
     object-position: 28% center
}

.product-card:nth-child(4) .image-frame img {
     object-position: 70% center
}

.product-card:hover .image-frame img {
     transform: scale(1.045)
}

.card-copy {
     padding: 17px 18px 19px
}

.card-copy h3 {
     font-size: 1.02rem;
     margin-bottom: 5px
}

.card-copy p {
     font-size: .86rem;
     min-height: 42px;
     margin-bottom: 14px
}

.card-copy a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: .82rem;
     color: var(--copper);
     font-weight: 600
}

.card-copy a i {
     font-size: .68rem;
     transition: transform .2s
}

.card-copy a:hover i {
     transform: translateX(4px)
}

.service-story {
     padding-top: 28px
}

.story-grid {
     display: grid;
     grid-template-columns: 1.08fr .92fr;
     align-items: stretch;
     gap: 54px
}

.story-image {
     min-height: 460px;
     position: relative;
     margin: 0;
     border-radius: 2px;
     overflow: hidden;
     background: #eee
}

.story-image img {
     width: 100%;
     height: 100%;
     position: absolute;
     inset: 0;
     object-fit: cover;
     object-position: center
}

.story-image::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(105deg, transparent 56%, rgba(255, 255, 255, .72))
}

.story-image figcaption {
     position: absolute;
     z-index: 1;
     right: 7%;
     top: 9%;
     color: #131b27;
     font: italic 2.1rem/1.16 Georgia, serif;
     transform: rotate(-4deg);
     text-align: center
}

.story-copy {
     align-self: center
}

.story-copy h2 {
     font-size: clamp(2rem, 3.2vw, 3.3rem);
     margin-bottom: 16px
}

.story-copy>p:not(.eyebrow) {
     max-width: 570px
}

.check-list {
     padding: 0;
     margin: 23px 0 27px;
     list-style: none
}

.check-list li {
     position: relative;
     padding: 5px 0 5px 31px
}

.check-list li::before {
     content: '✓';
     position: absolute;
     left: 0;
     top: 6px;
     width: 19px;
     height: 19px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: var(--copper);
     color: #fff;
     font-weight: 600;
     font-size: .72rem
}

.process-section {
     background: linear-gradient(100deg, #f2f4f6, #fbfbfc 52%, #f2f4f6)
}

.process-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     list-style: none;
     padding: 15px 0 0;
     margin: 0
}

.process-step {
     text-align: center;
     padding: 0 25px;
     position: relative
}

.process-step::before {
     content: '';
     position: absolute;
     left: 0;
     right: 0;
     top: 17px;
     height: 1px;
     background: #c9997e
}

.process-step:first-child::before {
     left: 50%
}

.process-step:last-child::before {
     right: 50%
}

.step-number {
     position: relative;
     z-index: 1;
     margin: 0 auto 23px;
     width: 34px;
     height: 34px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: var(--copper);
     color: #fff;
     font-weight: 600;
     border: 4px solid #f5f6f7
}

.process-step>i {
     display: block;
     font-size: 2rem;
     color: var(--copper);
     margin-bottom: 15px
}

.process-step h3 {
     font-size: .96rem;
     margin-bottom: 6px
}

.process-step p {
     font-size: .82rem;
     line-height: 1.35;
     max-width: 180px;
     margin: 0 auto
}

.ideal-section {
     padding-bottom: 40px
}

.occasion-card {
     padding: 9px
}

.occasion-card>img {
     width: 100%;
     height: 138px;
     object-fit: cover;
     border-radius: 6px
}

.occasion-card:nth-child(2)>img {
     object-position: 55% 50%
}

.occasion-card:nth-child(3)>img {
     object-position: 80% 50%
}

.occasion-card:nth-child(4)>img {
     object-position: 30% 50%
}

.occasion-card>div {
     padding: 13px 8px 4px
}

.occasion-card h3 {
     font-size: .96rem;
     margin-bottom: 6px
}

.occasion-card p {
     font-size: .82rem;
     line-height: 1.35;
     min-height: 44px;
     margin-bottom: 11px
}

.occasion-card span {
     display: block;
     width: 36px;
     height: 2px;
     background: var(--copper)
}

.why-section {
     padding-top: 35px
}

.why-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 13px
}

.why-card {
     min-height: 154px;
     text-align: center;
     padding: 23px 12px 16px;
     background: #fff;
     border: 1px solid #eceef0;
     border-radius: 8px;
     box-shadow: 0 6px 20px rgba(16, 35, 56, .06);
     transition: transform .3s, border-color .3s
}

.why-card:hover {
     transform: translateY(-5px);
     border-color: #d4aa91
}

.why-card>i {
     color: var(--copper);
     font-size: 1.65rem;
     margin-bottom: 13px
}

.why-card h3 {
     font-size: .78rem;
     margin-bottom: 6px
}

.why-card p {
     font-size: .7rem;
     line-height: 1.32;
     margin: 0
}

.cta-wrap {
     padding: 10px 0 26px
}

.cta-panel {
     min-height: 184px;
     border-radius: 12px;
     padding: 31px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     position: relative;
     overflow: hidden;
     color: #fff;
     background-color: #102945;
     background-image: linear-gradient(90deg, rgba(7, 24, 45, .96) 0%, rgba(7, 24, 45, .76) 38%, rgba(7, 24, 45, .35) 66%, rgba(110, 48, 20, .3) 100%), url('../image/services/diary-calendar/diary-cta-coimbatore.png');
     background-size: cover;
     background-position: center 62%
}

.cta-panel::after {
     content: '';
     position: absolute;
     inset: 0;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: inherit;
     pointer-events: none
}

.cta-copy,
.cta-actions {
     position: relative;
     z-index: 1
}

.cta-copy h2 {
     color: #fff;
     font-size: clamp(1.8rem, 3vw, 2.65rem);
     margin-bottom: 10px
}

.cta-copy p {
     margin: 0
}

.cta-actions {
     display: grid;
     gap: 9px;
     min-width: 245px
}

.cta-actions>a:not(.button) {
     font-size: .9rem
}

.cta-actions>a i {
     margin-right: 8px
}

.cta-actions .button i {
     margin-right: 0
}

.faq-section {
     padding-top: 35px
}

.faq-grid {
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 62px
}

.faq-intro>h2 {
     font-size: 2.25rem;
     margin-bottom: 7px
}

.question-prompt {
     display: flex;
     align-items: center;
     gap: 22px;
     margin-top: 50px
}

.question-prompt>i {
     font-size: 4.5rem;
     color: var(--navy)
}

.question-prompt h3 {
     font-size: 1rem;
     margin-bottom: 2px
}

.question-prompt p {
     font-size: .86rem;
     margin-bottom: 13px
}

.question-prompt .button {
     min-height: 40px;
     padding: 9px 18px;
     font-size: .8rem
}

.accordion details {
     background: #f3f5f7;
     border-radius: 6px;
     margin-bottom: 10px;
     overflow: hidden
}

.accordion summary {
     list-style: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     min-height: 49px;
     padding: 12px 17px;
     color: var(--navy);
     font-weight: 600;
     font-size: .86rem;
     cursor: pointer
}

.accordion summary::-webkit-details-marker {
     display: none
}

.accordion summary span {
     position: relative;
     width: 15px;
     height: 15px;
     flex: 0 0 15px
}

.accordion summary span::before,
.accordion summary span::after {
     content: '';
     position: absolute;
     background: var(--navy);
     left: 3px;
     right: 3px;
     top: 7px;
     height: 1px
}

.accordion summary span::after {
     transform: rotate(90deg);
     transition: transform .2s
}

.accordion details[open] summary span::after {
     transform: rotate(0)
}

.accordion details p {
     padding: 0 17px 16px;
     margin: 0;
     font-size: .85rem;
     max-width: 95%
}

.site-footer {
     background: var(--navy);
     color: #cad1db;
     padding: 54px 0 20px
}

.footer-grid {
     display: grid;
     grid-template-columns: 1.2fr 1fr 1fr;
     gap: 45px
}

.footer-grid>div:first-child img {
     width: 145px;
     height: 60px;
     object-fit: contain;
     background: #fff;
     border-radius: 6px;
     padding: 4px;
     margin-bottom: 12px
}

.footer-grid h2 {
     font: 600 .88rem/1 Jost, sans-serif;
     text-transform: uppercase;
     letter-spacing: .12em;
     color: #fff;
     margin-bottom: 15px
}

.footer-grid p {
     font-size: .87rem
}

.footer-grid a {
     display: block;
     font-size: .87rem;
     margin-bottom: 8px
}

.footer-grid a:hover {
     color: #fff
}

.footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .13);
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 35px;
     padding-top: 18px;
     font-size: .76rem
}

.footer-bottom p {
     margin: 0
}

.whatsapp-float {
     position: fixed;
     z-index: 50;
     right: 22px;
     bottom: 22px;
     width: 54px;
     height: 54px;
     display: grid;
     place-items: center;
     border-radius: 50%;
     background: #25d366;
     color: #fff;
     font-size: 1.65rem;
     box-shadow: 0 8px 25px rgba(0, 0, 0, .25);
     transition: transform .2s
}

.whatsapp-float:hover {
     transform: translateY(-3px) scale(1.04)
}

.reveal {
     opacity: 0;
     transform: translateY(22px);
     transition: opacity .7s ease, transform .7s ease
}

.reveal.is-visible {
     opacity: 1;
     transform: none
}

.product-card:nth-child(2),
.occasion-card:nth-child(2),
.why-card:nth-child(2),
.benefit:nth-child(2) {
     transition-delay: .07s
}

.product-card:nth-child(3),
.occasion-card:nth-child(3),
.why-card:nth-child(3),
.benefit:nth-child(3) {
     transition-delay: .14s
}

.product-card:nth-child(4),
.occasion-card:nth-child(4),
.why-card:nth-child(4),
.benefit:nth-child(4) {
     transition-delay: .21s
}

.why-card:nth-child(5) {
     transition-delay: .28s
}

.why-card:nth-child(6) {
     transition-delay: .35s
}

@media (max-width:1020px) {
     .site-menu {
          gap: 20px
     }

     .benefit-grid {
          grid-template-columns: repeat(2, 1fr)
     }

     .benefit:nth-child(2)::after {
          display: none
     }

     .benefit:nth-child(-n+2) {
          border-bottom: 1px solid #e1e3e5
     }

     .product-grid,
     .occasion-grid {
          grid-template-columns: repeat(2, 1fr)
     }

     .why-grid {
          grid-template-columns: repeat(3, 1fr)
     }

     .story-grid {
          gap: 34px
     }

     .faq-grid {
          gap: 35px
     }
}

@media (max-width:760px) {
     .shell {
          width: min(100% - 28px, 620px)
     }

     .section {
          padding: 58px 0
     }

     .site-header {
          height: 70px;
          position: sticky;
          top: 0
     }

     .brand img {
          width: 108px;
          height: 50px
     }

     .menu-toggle {
          display: block;
          position: relative;
          z-index: 102
     }

     .menu-toggle[aria-expanded=true]>span:nth-child(1) {
          transform: translateY(7px) rotate(45deg)
     }

     .menu-toggle[aria-expanded=true]>span:nth-child(2) {
          opacity: 0
     }

     .menu-toggle[aria-expanded=true]>span:nth-child(3) {
          transform: translateY(-7px) rotate(-45deg)
     }

     .site-menu {
          position: fixed;
          inset: 70px 0 0;
          background: #fff;
          display: flex;
          flex-direction: column;
          align-items: stretch;
          gap: 0;
          padding: 25px 20px 35px;
          transform: translateX(100%);
          visibility: hidden;
          transition: transform .3s, visibility .3s;
          box-shadow: -12px 0 30px rgba(0, 0, 0, .1)
     }

     .site-menu.is-open {
          transform: none;
          visibility: visible
     }

     .site-menu>a {
          font-size: 1rem;
          border-bottom: 1px solid #eceef0;
          padding: 15px 8px
     }

     .site-menu .nav-cta {
          text-align: center;
          margin-top: 18px;
          border: 0
     }

     .hero-placeholder {
          height: 430px;
          background-position: 62% center
     }

     .hero-content {
          padding-bottom: 12px
     }

     .hero-content h1 {
          font-size: 2.65rem;
          max-width: 360px
     }

     .hero-content>p:not(.eyebrow) {
          font-size: 1rem;
          max-width: 300px
     }

     .banner-note {
          display: none
     }

     .benefit-bar {
          padding-top: 14px
     }

     .benefit-grid {
          grid-template-columns: 1fr;
          border-radius: 9px
     }

     .benefit {
          min-height: 87px;
          padding: 16px 20px
     }

     .benefit:not(:last-child) {
          border-bottom: 1px solid #e1e3e5
     }

     .benefit::after {
          display: none
     }

     .product-grid,
     .occasion-grid {
          grid-template-columns: 1fr
     }

     .image-frame {
          height: 275px
     }

     .story-grid {
          grid-template-columns: 1fr
     }

     .story-image {
          min-height: 390px
     }

     .story-image figcaption {
          font-size: 1.7rem
     }

     .story-copy h2 br {
          display: none
     }

     .process-grid {
          grid-template-columns: 1fr;
          gap: 8px
     }

     .process-step {
          display: grid;
          grid-template-columns: 42px 42px 1fr;
          column-gap: 12px;
          text-align: left;
          padding: 0 0 27px
     }

     .process-step::before {
          top: 34px;
          bottom: -9px;
          left: 17px !important;
          right: auto !important;
          width: 1px;
          height: auto
     }

     .process-step:last-child::before {
          display: none
     }

     .step-number {
          grid-row: 1/3;
          margin: 0
     }

     .process-step>i {
          grid-row: 1/3;
          align-self: start;
          margin: 3px 0 0;
          font-size: 1.65rem
     }

     .process-step h3,
     .process-step p {
          max-width: none;
          margin: 0
     }

     .process-step h3 {
          padding-top: 3px
     }

     .process-step p {
          grid-column: 3
     }

     .why-grid {
          grid-template-columns: repeat(2, 1fr)
     }

     .cta-panel {
          align-items: flex-start;
          flex-direction: column;
          padding: 30px 22px;
          background-position: 58% center
     }

     .cta-actions {
          min-width: 0;
          width: 100%
     }

     .faq-grid {
          grid-template-columns: 1fr
     }

     .question-prompt {
          margin-top: 30px
     }

     .footer-grid {
          grid-template-columns: 1fr;
          gap: 27px
     }

     .footer-bottom {
          align-items: flex-start;
          gap: 15px
     }

     .reveal {
          transform: translateY(14px)
     }
}

@media (max-width:420px) {
     h2 {
          font-size: 1.95rem
     }

     .hero-placeholder {
          height: 410px
     }

     .hero-content h1 {
          font-size: 2.35rem
     }

     .product-card,
     .occasion-card {
          max-width: 360px;
          margin-inline: auto;
          width: 100%
     }

     .image-frame {
          height: 230px
     }

     .story-image {
          min-height: 320px
     }

     .why-grid {
          gap: 9px
     }

     .why-card {
          min-height: 145px;
          padding: 20px 8px 14px
     }

     .cta-copy h2 br {
          display: none
     }

     .question-prompt>i {
          font-size: 3.6rem
     }

     .footer-bottom {
          display: block
     }

     .footer-bottom a {
          display: inline-block;
          margin-top: 9px
     }
}

@media (prefers-reduced-motion:reduce) {
     html {
          scroll-behavior: auto
     }

     *,
     *::before,
     *::after {
          animation-duration: .01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: .01ms !important
     }

     .reveal {
          opacity: 1;
          transform: none
     }
}

/* Creative shared service-page treatments */
.diary-page main,
.calendar-page main {
     overflow: hidden
}

.diary-page .section,
.calendar-page .section {
     position: relative
}

.diary-page .section-heading h2,
.calendar-page .section-heading h2 {
     position: relative;
     display: inline-block
}

.diary-page .section-heading h2::after,
.calendar-page .section-heading h2::after {
     content: '';
     display: block;
     width: 92px;
     height: 4px;
     margin: 12px auto 0;
     border-radius: 9px;
     background: linear-gradient(90deg, #ef087f 0 34%, #ffc400 34% 66%, #04aedd 66%)
}

.product-card {
     position: relative
}

.product-card::before {
     content: '';
     position: absolute;
     z-index: 2;
     top: 0;
     right: 0;
     width: 42px;
     height: 42px;
     background: linear-gradient(135deg, transparent 49%, var(--copper) 50%);
     opacity: .88
}

.service-story::before {
     content: '';
     position: absolute;
     width: 310px;
     height: 310px;
     left: -170px;
     top: 30px;
     border: 42px solid rgba(174, 93, 45, .07);
     border-radius: 50%
}

.service-story::after {
     content: '';
     position: absolute;
     right: -65px;
     bottom: 10px;
     width: 190px;
     height: 190px;
     background-image: radial-gradient(rgba(12, 28, 53, .16) 1.5px, transparent 1.5px);
     background-size: 13px 13px;
     transform: rotate(12deg)
}

.story-grid {
     position: relative;
     z-index: 1
}

.story-image {
     box-shadow: 20px 20px 0 #f1e6df
}

.ideal-section {
     background: linear-gradient(180deg, #fff 0%, #faf8f5 100%)
}

.ideal-section::before {
     content: '';
     position: absolute;
     inset: 35px 0 auto auto;
     width: 150px;
     height: 150px;
     border-radius: 40% 60% 60% 40%;
     background: rgba(0, 174, 221, .06);
     transform: translateX(45%) rotate(30deg)
}

.why-section::after {
     content: '';
     position: absolute;
     left: 4%;
     right: 4%;
     bottom: 6%;
     height: 65%;
     z-index: -1;
     border-radius: 50%;
     background: radial-gradient(ellipse, rgba(174, 93, 45, .08), transparent 70%)
}

/* Animated production journey */
.process-journey {
     isolation: isolate;
     background: linear-gradient(135deg, #f3f5f8 0%, #fff 45%, #f6f1ed 100%)
}

.process-journey::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: -2;
     background-image: linear-gradient(rgba(12, 28, 53, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 28, 53, .025) 1px, transparent 1px);
     background-size: 32px 32px
}

.journey-orb {
     position: absolute;
     z-index: -1;
     border-radius: 50%;
     filter: blur(1px)
}

.journey-orb-one {
     width: 220px;
     height: 220px;
     left: -85px;
     top: -55px;
     background: rgba(0, 174, 221, .09)
}

.journey-orb-two {
     width: 260px;
     height: 260px;
     right: -110px;
     bottom: -100px;
     background: rgba(239, 8, 127, .07)
}

.journey-stage {
     position: relative;
     min-height: 430px;
     padding: 24px 25px 20px;
     border: 1px solid rgba(12, 28, 53, .09);
     border-radius: 22px;
     background: rgba(255, 255, 255, .84);
     box-shadow: 0 22px 60px rgba(12, 28, 53, .1);
     backdrop-filter: blur(7px)
}

.journey-stage::before {
     content: '';
     position: absolute;
     inset: 9px;
     border: 1px dashed rgba(174, 93, 45, .2);
     border-radius: 16px;
     pointer-events: none
}

.journey-stations {
     position: relative;
     z-index: 3;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
     margin: 0;
     padding: 0;
     list-style: none
}

.journey-stations li {
     min-height: 125px;
     display: grid;
     grid-template-columns: 48px 1fr;
     align-items: center;
     gap: 12px;
     position: relative;
     padding: 17px 14px;
     border: 1px solid #e8e9ed;
     border-radius: 13px;
     background: #fff;
     box-shadow: 0 8px 24px rgba(13, 28, 52, .06);
     transition: transform .3s, border-color .3s
}

.journey-stations li:hover {
     transform: translateY(-5px);
     border-color: #d9a98c
}

.journey-stations li>i {
     grid-row: 1/3;
     width: 48px;
     height: 48px;
     display: grid;
     place-items: center;
     border-radius: 13px;
     background: linear-gradient(145deg, #f5e5dc, #fff);
     color: var(--copper);
     font-size: 1.55rem
}

.journey-step-no {
     position: absolute;
     right: 10px;
     top: 6px;
     color: rgba(12, 28, 53, .09);
     font: 600 1.6rem/1 Jost, sans-serif
}

.journey-stations h3 {
     font-size: .9rem;
     margin: 0 0 4px
}

.journey-stations p {
     font-size: .72rem;
     line-height: 1.3;
     margin: 0
}

.journey-animation {
     position: absolute;
     z-index: 2;
     left: 25px;
     right: 25px;
     bottom: 40px;
     height: 205px
}

.journey-track {
     position: absolute;
     left: 5%;
     right: 10%;
     bottom: 30px;
     height: 54px;
     display: flex;
     align-items: center;
     justify-content: space-around;
     padding: 8px 10px;
     border: 5px solid var(--navy);
     border-radius: 13px;
     background: repeating-linear-gradient(115deg, #c9cdd3 0 13px, #eef0f2 13px 26px);
     box-shadow: 0 12px 0 #9b532c, 0 18px 24px rgba(12, 28, 53, .16);
     overflow: hidden
}

.journey-track::before {
     content: '';
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, .65) 22px 30px);
     transform: translateX(-30px)
}

.process-journey.is-running .journey-track::before {
     animation: beltMove .7s linear infinite
}

.journey-track>span {
     position: relative;
     z-index: 1;
     width: 25px;
     height: 25px;
     border: 3px solid #6f7883;
     border-radius: 50%;
     background: #fff;
     box-shadow: inset 0 0 0 4px #c2c7cc
}

.journey-worker {
     position: absolute;
     z-index: 5;
     left: 3%;
     bottom: 86px;
     width: 76px;
     color: var(--navy);
     text-align: center
}

.journey-worker>i {
     display: block;
     font-size: 4.35rem;
     line-height: 1
}

.journey-worker .carried-product {
     position: absolute;
     right: -7px;
     bottom: 4px;
     width: 31px;
     height: 38px;
     display: grid;
     place-items: center;
     border: 2px solid #fff;
     border-radius: 5px;
     background: var(--copper);
     color: #fff;
     font-size: 1.15rem;
     box-shadow: 0 5px 10px rgba(0, 0, 0, .18)
}

.journey-product {
     position: absolute;
     z-index: 6;
     left: 16%;
     bottom: 43px;
     width: 56px;
     height: 67px;
     display: grid;
     place-items: center;
     border: 3px solid #fff;
     border-radius: 7px;
     background: linear-gradient(145deg, var(--navy), #25466c);
     color: #fff;
     box-shadow: 0 8px 18px rgba(12, 28, 53, .28);
     opacity: 0
}

.journey-product>i {
     font-size: 1.7rem
}

.journey-product small {
     position: absolute;
     bottom: 4px;
     font-size: .45rem;
     text-transform: uppercase;
     letter-spacing: .08em
}

.journey-machine {
     position: absolute;
     z-index: 7;
     right: 1%;
     bottom: 26px;
     width: 108px;
     height: 139px;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-top: 17px;
     border: 5px solid #09182d;
     border-radius: 15px 15px 8px 8px;
     background: linear-gradient(145deg, #253d5b, #0c1c35);
     color: #fff;
     box-shadow: 0 13px 25px rgba(12, 28, 53, .25);
     overflow: hidden
}

.journey-machine>i {
     font-size: 2.15rem
}

.journey-machine small {
     position: absolute;
     bottom: 7px;
     font-size: .56rem;
     letter-spacing: .14em;
     color: #f3bd9c
}

.machine-slot {
     position: absolute;
     left: 17px;
     right: 17px;
     top: 66px;
     height: 9px;
     border-radius: 7px;
     background: #020813;
     box-shadow: inset 0 2px 4px #000
}

.machine-door {
     position: absolute;
     z-index: 2;
     left: 9px;
     right: 9px;
     top: 7px;
     height: 112px;
     border: 2px solid #c47a50;
     border-radius: 8px;
     background: repeating-linear-gradient(0deg, #a75c32 0 8px, #c5794f 8px 16px);
     transform: scaleY(.03);
     transform-origin: top;
     opacity: .96
}

.journey-package {
     position: absolute;
     z-index: 8;
     right: 1.9%;
     bottom: 31px;
     color: #ffc400;
     text-align: center;
     opacity: 0
}

.journey-package i {
     display: block;
     font-size: 3rem
}

.journey-package span {
     display: block;
     padding: 2px 7px;
     border-radius: 20px;
     background: #fff;
     color: var(--navy);
     font-size: .55rem;
     font-weight: 600;
     text-transform: uppercase
}

.journey-caption {
     position: absolute;
     z-index: 4;
     left: 0;
     right: 0;
     bottom: -2px;
     margin: 0;
     text-align: center;
     color: #68727e;
     font-size: .78rem
}

.journey-caption i {
     margin-right: 6px;
     color: var(--copper)
}

.process-journey.is-running .journey-worker {
     animation: workerJourney 13s ease-in-out infinite
}

.process-journey.is-running .journey-worker>i {
     animation: walkBob .52s ease-in-out infinite
}

.process-journey.is-running .carried-product {
     animation: placeProduct 13s ease-in-out infinite
}

.process-journey.is-running .journey-product {
     animation: productJourney 13s ease-in-out infinite
}

.process-journey.is-running .machine-door {
     animation: doorClose 13s ease-in-out infinite
}

.process-journey.is-running .journey-package {
     animation: packageReady 13s ease-in-out infinite
}

@keyframes beltMove {
     to {
          transform: translateX(30px)
     }
}

@keyframes walkBob {
     50% {
          transform: translateY(-4px) rotate(-3deg)
     }
}

@keyframes workerJourney {

     0%,
     5% {
          left: 3%;
          opacity: 0
     }

     8% {
          opacity: 1
     }

     18% {
          left: 15%
     }

     34% {
          left: 36%
     }

     51% {
          left: 57%
     }

     68% {
          left: 76%
     }

     82%,
     91% {
          left: 87%;
          opacity: 1
     }

     95%,
     100% {
          left: 87%;
          opacity: 0
     }
}

@keyframes placeProduct {

     0%,
     15% {
          opacity: 1;
          transform: none
     }

     19% {
          opacity: 1;
          transform: translate(12px, 48px) rotate(8deg)
     }

     21%,
     100% {
          opacity: 0;
          transform: translate(12px, 48px)
     }
}

@keyframes productJourney {

     0%,
     18% {
          left: 16%;
          opacity: 0;
          transform: translateY(-28px)
     }

     21% {
          opacity: 1;
          transform: none
     }

     34% {
          left: 36%
     }

     51% {
          left: 57%
     }

     68% {
          left: 76%
     }

     82% {
          left: 88%;
          opacity: 1;
          transform: scale(1)
     }

     86%,
     100% {
          left: 90%;
          opacity: 0;
          transform: scale(.6)
     }
}

@keyframes doorClose {

     0%,
     80% {
          transform: scaleY(.03)
     }

     87%,
     94% {
          transform: scaleY(1)
     }

     99%,
     100% {
          transform: scaleY(.03)
     }
}

@keyframes packageReady {

     0%,
     88% {
          opacity: 0;
          transform: translateY(-8px) scale(.7)
     }

     92%,
     97% {
          opacity: 1;
          transform: none
     }

     100% {
          opacity: 0
     }
}

@media(min-width:761px) {
     .occasion-card:nth-child(odd) {
          transform: translateY(-5px)
     }

     .occasion-card:nth-child(even) {
          transform: translateY(8px)
     }

     .occasion-card:hover {
          transform: translateY(-9px) rotate(-.4deg)
     }
}

@media(max-width:760px) {
     .story-image {
          box-shadow: 11px 11px 0 #f1e6df
     }

     .journey-stage {
          min-height: 690px;
          padding: 18px 16px
     }

     .journey-stations {
          height: 540px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 80px;
          gap: 8px
     }

     .journey-stations li {
          min-height: 112px;
          grid-template-columns: 43px 1fr;
          padding: 13px 11px
     }

     .journey-stations li>i {
          width: 43px;
          height: 43px
     }

     .journey-animation {
          inset: 15px 10px 30px;
          height: auto
     }

     .journey-track {
          left: 18px;
          right: auto;
          top: 23px;
          bottom: 44px;
          width: 49px;
          height: auto;
          flex-direction: column;
          padding: 8px 6px
     }

     .journey-track::before {
          background: repeating-linear-gradient(25deg, transparent 0 22px, rgba(255, 255, 255, .65) 22px 30px)
     }

     .journey-track>span {
          width: 20px;
          height: 20px;
          flex: 0 0 20px
     }

     .journey-worker {
          left: 0;
          top: 20px;
          bottom: auto;
          width: 67px
     }

     .journey-worker>i {
          font-size: 3.7rem
     }

     .journey-worker .carried-product {
          right: -2px;
          width: 28px;
          height: 34px
     }

     .journey-product {
          left: 18px;
          top: 128px;
          bottom: auto;
          width: 49px;
          height: 58px
     }

     .journey-machine {
          left: 0;
          right: auto;
          bottom: 0;
          width: 86px;
          height: 108px;
          padding-top: 9px
     }

     .journey-machine>i {
          font-size: 1.7rem
     }

     .machine-slot {
          top: 50px;
          left: 13px;
          right: 13px
     }

     .machine-door {
          height: 85px
     }

     .journey-package {
          left: 12px;
          right: auto;
          bottom: 5px
     }

     .journey-package i {
          font-size: 2.35rem
     }

     .journey-caption {
          left: 93px;
          right: 5px;
          bottom: 2px;
          text-align: left
     }

     .process-journey.is-running .journey-worker {
          animation-name: workerJourneyMobile
     }

     .process-journey.is-running .journey-product {
          animation-name: productJourneyMobile
     }

     .process-journey.is-running .carried-product {
          animation-name: placeProductMobile
     }
}

/* Product artwork: keep the newly supplied portrait and square assets fully
   visible, centred and consistently framed across both printing pages. */
#diary-types .shell,
#calendar-types .shell {
     width: min(1440px, calc(100% - 48px));
}

#diary-types .product-grid,
#calendar-types .product-grid {
     gap: 24px;
}

#diary-types .product-card,
#calendar-types .product-card {
     min-height: 440px;
}

.diary-page .product-card .image-frame,
.calendar-page .product-card .image-frame {
     display: grid;
     place-items: center;
     height: auto;
     aspect-ratio: 5 / 4;
     padding: 0;
     background: linear-gradient(145deg, #f8f6f3 0%, #eeece8 100%);
}

#diary-types .product-card .card-copy,
#calendar-types .product-card .card-copy {
     padding: 20px 20px 22px;
}

@media(max-width:1100px) {
     #diary-types .product-grid,
     #calendar-types .product-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     #diary-types .product-card,
     #calendar-types .product-card {
          min-height: 0;
     }
}

@media(max-width:760px) {
     #diary-types .shell,
     #calendar-types .shell {
          width: min(100% - 28px, 620px);
     }

     #diary-types .product-grid,
     #calendar-types .product-grid {
          grid-template-columns: 1fr;
          gap: 18px;
     }
}

.diary-page .product-card .image-frame img,
.calendar-page .product-card .image-frame img,
.diary-page .product-card:nth-child(n) .image-frame img,
.calendar-page .product-card:nth-child(n) .image-frame img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     border-radius: 0;
}

.diary-page .product-card:nth-child(1) .image-frame img {
     object-position: center 54%;
}

.diary-page .product-card:nth-child(2) .image-frame img {
     object-position: center 56%;
}

.diary-page .product-card:nth-child(3) .image-frame img,
.diary-page .product-card:nth-child(4) .image-frame img,
.calendar-page .product-card:nth-child(n) .image-frame img {
     object-position: center;
}

.diary-page .story-image img {
     object-position: center;
}

.calendar-page .story-image {
     background: #fff;
}

.calendar-page .story-image img {
     object-fit: contain;
     object-position: center;
     padding: 12px;
}

@media(max-width:420px) {
     .diary-page .product-card .image-frame,
     .calendar-page .product-card .image-frame {
          height: auto;
          aspect-ratio: 5 / 4;
          padding: 0;
     }
}

@keyframes workerJourneyMobile {

     0%,
     5% {
          top: 20px;
          left: 0;
          opacity: 0
     }

     8% {
          opacity: 1
     }

     18% {
          top: 78px
     }

     34% {
          top: 220px
     }

     51% {
          top: 354px
     }

     68% {
          top: 485px
     }

     82%,
     91% {
          top: 555px;
          opacity: 1
     }

     95%,
     100% {
          top: 555px;
          opacity: 0
     }
}

@keyframes placeProductMobile {

     0%,
     15% {
          opacity: 1;
          transform: none
     }

     19% {
          opacity: 1;
          transform: translate(18px, 37px) rotate(8deg)
     }

     21%,
     100% {
          opacity: 0;
          transform: translate(18px, 37px)
     }
}

@keyframes productJourneyMobile {

     0%,
     18% {
          top: 100px;
          left: 18px;
          opacity: 0
     }

     21% {
          opacity: 1
     }

     34% {
          top: 228px
     }

     51% {
          top: 355px
     }

     68% {
          top: 485px
     }

     82% {
          top: 565px;
          opacity: 1;
          transform: scale(1)
     }

     86%,
     100% {
          top: 585px;
          opacity: 0;
          transform: scale(.6)
     }
}

@media(prefers-reduced-motion:reduce) {
     .journey-worker {
          left: 87%;
          opacity: 1
     }

     .journey-product {
          left: 61%;
          opacity: 1
     }

     .machine-door {
          transform: scaleY(.03)
     }

     .journey-package {
          opacity: 1
     }

     .process-journey.is-running * {
          animation: none !important
     }
}

@media(prefers-reduced-motion:reduce) and (max-width:760px) {
     .journey-worker {
          left: 0;
          top: 515px
     }

     .journey-product {
          left: 18px;
          top: 390px
     }
}

/* Process animation v2: brief -> approval -> conveyor -> print -> pack */
.process-journey-v2 .journey-stage {
     min-height: 475px
}

.process-journey-v2 .journey-animation {
     height: 245px
}

.journey-route {
     position: absolute;
     left: 7%;
     right: 8%;
     bottom: 121px;
     height: 3px;
     background: linear-gradient(90deg, #acb4bd 0 49%, var(--copper) 49% 100%);
     opacity: .7
}

.journey-route>span {
     position: absolute;
     top: 50%;
     width: 15px;
     height: 15px;
     border: 3px solid #fff;
     border-radius: 50%;
     background: var(--navy);
     box-shadow: 0 0 0 2px rgba(12, 28, 53, .2);
     transform: translate(-50%, -50%)
}

.journey-route>span:nth-child(1) {
     left: 7%
}

.journey-route>span:nth-child(2) {
     left: 35%
}

.journey-route>span:nth-child(3) {
     left: 61%
}

.journey-route>span:nth-child(4) {
     left: 91%;
     background: var(--copper)
}

.journey-action {
     position: absolute;
     z-index: 10;
     left: 25%;
     right: 25%;
     top: 0;
     height: 31px;
     text-align: center
}

.journey-action span {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: max-content;
     max-width: 100%;
     margin: auto;
     padding: 5px 13px;
     border: 1px solid #e5d1c5;
     border-radius: 99px;
     background: #fff;
     color: var(--navy);
     font-size: .68rem;
     font-weight: 600;
     letter-spacing: .05em;
     text-transform: uppercase;
     box-shadow: 0 5px 14px rgba(12, 28, 53, .08);
     opacity: 0
}

.journey-loading-zone {
     position: absolute;
     z-index: 5;
     left: 48.5%;
     bottom: 95px;
     display: flex;
     flex-direction: column;
     align-items: center;
     color: var(--copper);
     opacity: .35
}

.journey-loading-zone i {
     font-size: 1.5rem
}

.journey-loading-zone small {
     font-size: .48rem;
     font-weight: 600;
     letter-spacing: .08em
}

.process-journey-v2 .journey-track {
     left: 51%;
     right: 19%;
     bottom: 30px
}

.process-journey-v2 .journey-worker {
     left: 3%;
     bottom: 88px
}

.journey-worker .carried-brief {
     position: absolute;
     right: -5px;
     bottom: 4px;
     width: 31px;
     height: 39px;
     display: grid;
     place-items: center;
     border: 2px solid #fff;
     border-radius: 5px;
     background: #fff;
     color: var(--navy);
     font-size: 1.15rem;
     box-shadow: 0 5px 12px rgba(0, 0, 0, .18)
}

.process-journey-v2 .journey-worker .carried-product {
     opacity: 0
}

.process-journey-v2 .journey-product {
     left: 53%;
     bottom: 43px
}

.process-journey-v2 .journey-machine {
     right: 9%;
     bottom: 26px
}

.machine-gear {
     position: absolute;
     right: 8px;
     top: 9px;
     color: #f3bd9c;
     font-size: .9rem
}

.process-journey-v2 .journey-package {
     right: 1.5%;
     bottom: 34px
}

.journey-package span {
     white-space: nowrap
}

.journey-truck {
     position: absolute;
     z-index: 9;
     right: -5%;
     bottom: 24px;
     color: var(--navy);
     text-align: center;
     opacity: 0
}

.journey-truck i {
     display: block;
     font-size: 3rem
}

.journey-truck small {
     display: block;
     padding: 2px 7px;
     border-radius: 12px;
     background: var(--copper);
     color: #fff;
     font-size: .5rem;
     text-transform: uppercase;
     letter-spacing: .08em
}

.process-journey-v2.is-running .journey-worker {
     animation: workerProcess 16s ease-in-out infinite !important
}

.process-journey-v2.is-running .carried-brief {
     animation: briefHandoff 16s ease-in-out infinite
}

.process-journey-v2.is-running .carried-product {
     animation: approvedCarry 16s ease-in-out infinite !important
}

.process-journey-v2.is-running .journey-product {
     animation: printLineProduct 16s ease-in-out infinite !important
}

.process-journey-v2.is-running .machine-door {
     animation: productionDoor 16s ease-in-out infinite !important
}

.process-journey-v2.is-running .machine-gear {
     animation: gearProcess 16s linear infinite
}

.process-journey-v2.is-running .journey-package {
     animation: checkedPackage 16s ease-in-out infinite !important
}

.process-journey-v2.is-running .journey-truck {
     animation: deliveryTruck 16s ease-in-out infinite
}

.process-journey-v2.is-running .journey-loading-zone {
     animation: loadPrompt 16s ease-in-out infinite
}

.process-journey-v2.is-running .journey-action span:nth-child(1) {
     animation: phaseOne 16s infinite
}

.process-journey-v2.is-running .journey-action span:nth-child(2) {
     animation: phaseTwo 16s infinite
}

.process-journey-v2.is-running .journey-action span:nth-child(3) {
     animation: phaseThree 16s infinite
}

.process-journey-v2.is-running .journey-action span:nth-child(4) {
     animation: phaseFour 16s infinite
}

.process-journey-v2.is-running .journey-action span:nth-child(5) {
     animation: phaseFive 16s infinite
}

.process-journey-v2.is-running .journey-stations li:nth-child(1) {
     animation: stationOne 16s infinite
}

.process-journey-v2.is-running .journey-stations li:nth-child(2) {
     animation: stationTwo 16s infinite
}

.process-journey-v2.is-running .journey-stations li:nth-child(3) {
     animation: stationThree 16s infinite
}

.process-journey-v2.is-running .journey-stations li:nth-child(4) {
     animation: stationFour 16s infinite
}

@keyframes workerProcess {

     0%,
     3% {
          left: 3%;
          opacity: 0
     }

     6%,
     14% {
          left: 8%;
          opacity: 1
     }

     30% {
          left: 34%;
          opacity: 1
     }

     47%,
     54% {
          left: 51%;
          opacity: 1
     }

     70% {
          left: 70%;
          opacity: 1
     }

     84%,
     92% {
          left: 86%;
          opacity: 1
     }

     96%,
     100% {
          left: 86%;
          opacity: 0
     }
}

@keyframes briefHandoff {

     0%,
     24% {
          opacity: 1;
          transform: none
     }

     29% {
          opacity: 0;
          transform: translateY(-18px) scale(.75)
     }

     30%,
     100% {
          opacity: 0
     }
}

@keyframes approvedCarry {

     0%,
     29% {
          opacity: 0;
          transform: scale(.7)
     }

     33%,
     47% {
          opacity: 1;
          transform: none
     }

     52% {
          opacity: 1;
          transform: translate(8px, 45px) rotate(7deg)
     }

     54%,
     100% {
          opacity: 0;
          transform: translate(8px, 45px)
     }
}

@keyframes printLineProduct {

     0%,
     51% {
          left: 53%;
          opacity: 0;
          transform: translateY(-30px)
     }

     54% {
          left: 53%;
          opacity: 1;
          transform: none
     }

     67% {
          left: 64%
     }

     77% {
          left: 74%
     }

     84% {
          left: 81%;
          opacity: 1;
          transform: scale(1)
     }

     87%,
     100% {
          left: 83%;
          opacity: 0;
          transform: scale(.55)
     }
}

@keyframes productionDoor {

     0%,
     83% {
          transform: scaleY(.03)
     }

     88%,
     93% {
          transform: scaleY(1)
     }

     97%,
     100% {
          transform: scaleY(.03)
     }
}

@keyframes gearProcess {

     0%,
     49% {
          transform: rotate(0);
          opacity: .3
     }

     52%,
     86% {
          opacity: 1
     }

     87%,
     100% {
          transform: rotate(720deg);
          opacity: .3
     }
}

@keyframes checkedPackage {

     0%,
     89% {
          opacity: 0;
          transform: translateY(-8px) scale(.7)
     }

     93%,
     97% {
          opacity: 1;
          transform: none
     }

     100% {
          opacity: 0
     }
}

@keyframes deliveryTruck {

     0%,
     91% {
          right: -5%;
          opacity: 0
     }

     94% {
          right: 0;
          opacity: 1
     }

     98% {
          right: 4%;
          opacity: 1
     }

     100% {
          right: 8%;
          opacity: 0
     }
}

@keyframes loadPrompt {

     0%,
     39% {
          opacity: .25;
          transform: none
     }

     43%,
     54% {
          opacity: 1;
          transform: translateY(5px)
     }

     58%,
     100% {
          opacity: .25;
          transform: none
     }
}

@keyframes phaseOne {

     0%,
     4%,
     16% {
          opacity: 0;
          transform: translateY(4px)
     }

     6%,
     14% {
          opacity: 1;
          transform: none
     }
}

@keyframes phaseTwo {

     0%,
     23%,
     37% {
          opacity: 0;
          transform: translateY(4px)
     }

     26%,
     34% {
          opacity: 1;
          transform: none
     }
}

@keyframes phaseThree {

     0%,
     41%,
     58% {
          opacity: 0;
          transform: translateY(4px)
     }

     44%,
     55% {
          opacity: 1;
          transform: none
     }
}

@keyframes phaseFour {

     0%,
     57%,
     88% {
          opacity: 0;
          transform: translateY(4px)
     }

     61%,
     85% {
          opacity: 1;
          transform: none
     }
}

@keyframes phaseFive {

     0%,
     89%,
     100% {
          opacity: 0;
          transform: translateY(4px)
     }

     92%,
     98% {
          opacity: 1;
          transform: none
     }
}

@keyframes stationOne {

     6%,
     14% {
          border-color: var(--copper);
          box-shadow: 0 10px 28px rgba(174, 93, 45, .2)
     }

     0%,
     18%,
     100% {
          border-color: #e8e9ed
     }
}

@keyframes stationTwo {

     26%,
     35% {
          border-color: var(--copper);
          box-shadow: 0 10px 28px rgba(174, 93, 45, .2)
     }

     0%,
     22%,
     39%,
     100% {
          border-color: #e8e9ed
     }
}

@keyframes stationThree {

     53%,
     84% {
          border-color: var(--copper);
          box-shadow: 0 10px 28px rgba(174, 93, 45, .2)
     }

     0%,
     49%,
     88%,
     100% {
          border-color: #e8e9ed
     }
}

@keyframes stationFour {

     89%,
     98% {
          border-color: var(--copper);
          box-shadow: 0 10px 28px rgba(174, 93, 45, .2)
     }

     0%,
     85%,
     100% {
          border-color: #e8e9ed
     }
}

@media(max-width:760px) {
     .process-journey-v2 .journey-stage {
          min-height: 735px
     }

     .process-journey-v2 .journey-stations {
          height: 565px
     }

     .process-journey-v2 .journey-animation {
          inset: 15px 10px 30px;
          height: auto
     }

     .process-journey-v2 .journey-route {
          display: none
     }

     .process-journey-v2 .journey-action {
          left: 95px;
          right: 8px;
          top: auto;
          bottom: 3px;
          height: 27px
     }

     .process-journey-v2 .journey-action span {
          font-size: .56rem;
          padding: 4px 8px
     }

     .process-journey-v2 .journey-loading-zone {
          left: 18px;
          top: 310px;
          bottom: auto
     }

     .process-journey-v2 .journey-track {
          left: 18px;
          right: auto;
          top: 340px;
          bottom: 49px;
          width: 49px;
          height: auto
     }

     .process-journey-v2 .journey-worker {
          left: 0;
          top: 25px;
          bottom: auto
     }

     .process-journey-v2 .journey-product {
          left: 18px;
          top: 357px;
          bottom: auto
     }

     .process-journey-v2 .journey-machine {
          left: 0;
          right: auto;
          bottom: 0
     }

     .process-journey-v2 .journey-package {
          left: 7px;
          right: auto;
          bottom: 7px
     }

     .process-journey-v2 .journey-truck {
          left: 57px;
          right: auto;
          bottom: 4px
     }

     .process-journey-v2.is-running .journey-worker {
          animation-name: workerProcessMobile !important
     }

     .process-journey-v2.is-running .journey-product {
          animation-name: printLineProductMobile !important
     }

     .process-journey-v2.is-running .journey-truck {
          animation-name: deliveryTruckMobile
     }
}

@keyframes workerProcessMobile {

     0%,
     3% {
          top: 25px;
          opacity: 0
     }

     6%,
     14% {
          top: 55px;
          opacity: 1
     }

     30% {
          top: 190px;
          opacity: 1
     }

     47%,
     54% {
          top: 330px;
          opacity: 1
     }

     70% {
          top: 445px;
          opacity: 1
     }

     84%,
     92% {
          top: 560px;
          opacity: 1
     }

     96%,
     100% {
          top: 560px;
          opacity: 0
     }
}

@keyframes printLineProductMobile {

     0%,
     51% {
          top: 357px;
          opacity: 0;
          transform: translateX(-25px)
     }

     54% {
          top: 357px;
          opacity: 1;
          transform: none
     }

     67% {
          top: 435px
     }

     77% {
          top: 515px
     }

     84% {
          top: 590px;
          opacity: 1;
          transform: scale(1)
     }

     87%,
     100% {
          top: 615px;
          opacity: 0;
          transform: scale(.55)
     }
}

@keyframes deliveryTruckMobile {

     0%,
     91% {
          left: 57px;
          opacity: 0
     }

     94% {
          left: 70px;
          opacity: 1
     }

     98% {
          left: 88px;
          opacity: 1
     }

     100% {
          left: 105px;
          opacity: 0
     }
}

@media(prefers-reduced-motion:reduce) {
     .process-journey-v2 .journey-worker {
          left: 51%;
          opacity: 1
     }

     .process-journey-v2 .carried-brief {
          opacity: 0
     }

     .process-journey-v2 .carried-product {
          opacity: 0
     }

     .process-journey-v2 .journey-product {
          left: 68%;
          opacity: 1
     }

     .process-journey-v2 .journey-package {
          opacity: 1
     }

     .process-journey-v2 .journey-truck {
          right: 0;
          opacity: 1
     }

     .process-journey-v2 .journey-action span {
          display: none
     }

     .process-journey-v2 .journey-action span:last-child {
          display: flex;
          opacity: 1
     }
}

@media(prefers-reduced-motion:reduce) and (max-width:760px) {
     .process-journey-v2 .journey-worker {
          left: 0;
          top: 330px
     }

     .process-journey-v2 .journey-product {
          left: 18px;
          top: 475px
     }

     .process-journey-v2 .journey-truck {
          left: 75px;
          right: auto
     }
}

/* Custom animated print-floor worker */
.factory-worker {
     position: relative;
     display: block;
     width: 58px;
     height: 78px;
     margin: 0 auto;
     filter: drop-shadow(0 5px 5px rgba(12, 28, 53, .18))
}

.factory-worker>i {
     position: absolute;
     display: block
}

.worker-head {
     z-index: 3;
     top: 13px;
     left: 20px;
     width: 20px;
     height: 22px;
     border-radius: 48% 48% 44% 44%;
     background: #b96f45;
     border: 2px solid #8b4b2d
}

.worker-head::after {
     content: '';
     position: absolute;
     right: 2px;
     top: 8px;
     width: 3px;
     height: 3px;
     border-radius: 50%;
     background: #18253a
}

.worker-hat {
     z-index: 5;
     top: 7px;
     left: 15px;
     width: 31px;
     height: 12px;
     border-radius: 18px 18px 4px 4px;
     background: #ffc400;
     border: 2px solid #a75c00
}

.worker-hat::before {
     content: '';
     position: absolute;
     left: 11px;
     top: -6px;
     width: 7px;
     height: 9px;
     border-radius: 5px 5px 0 0;
     background: #ffc400;
     border: 2px solid #a75c00;
     border-bottom: 0
}

.worker-hat::after {
     content: '';
     position: absolute;
     left: -5px;
     right: -5px;
     bottom: -4px;
     height: 4px;
     border-radius: 4px;
     background: #e09a00
}

.worker-body {
     z-index: 2;
     top: 34px;
     left: 16px;
     width: 29px;
     height: 29px;
     border-radius: 7px 7px 4px 4px;
     background: linear-gradient(90deg, #e87724 0 38%, #fff 38% 48%, #e87724 48% 100%);
     border: 2px solid #a84914
}

.worker-body::after {
     content: '';
     position: absolute;
     left: 4px;
     right: 4px;
     bottom: 5px;
     height: 3px;
     background: #ffc400;
     border-radius: 2px
}

.worker-arm {
     z-index: 1;
     top: 37px;
     width: 8px;
     height: 28px;
     border-radius: 7px;
     background: #b96f45;
     border: 2px solid #8b4b2d;
     transform-origin: 50% 3px
}

.worker-arm-left {
     left: 10px;
     transform: rotate(22deg)
}

.worker-arm-right {
     right: 7px;
     transform: rotate(-34deg)
}

.worker-leg {
     z-index: 1;
     top: 59px;
     width: 10px;
     height: 25px;
     border-radius: 3px 3px 7px 7px;
     background: #173656;
     border: 2px solid #0b2037;
     transform-origin: 50% 2px
}

.worker-leg-left {
     left: 17px;
     transform: rotate(12deg)
}

.worker-leg-right {
     right: 15px;
     transform: rotate(-13deg)
}

.process-journey-v2.is-running .factory-worker {
     animation: workerBounce .48s ease-in-out infinite
}

.process-journey-v2.is-running .worker-arm-left {
     animation: workerArmLeft .48s ease-in-out infinite alternate
}

.process-journey-v2.is-running .worker-arm-right {
     animation: workerArmRight .48s ease-in-out infinite alternate
}

.process-journey-v2.is-running .worker-leg-left {
     animation: workerLegLeft .48s ease-in-out infinite alternate
}

.process-journey-v2.is-running .worker-leg-right {
     animation: workerLegRight .48s ease-in-out infinite alternate
}

.process-journey-v2 .journey-worker>i {
     display: none !important
}

.process-journey-v2 .journey-worker .carried-brief,
.process-journey-v2 .journey-worker .carried-product {
     right: -2px;
     bottom: 10px;
     z-index: 8
}

@keyframes workerBounce {
     50% {
          transform: translateY(-3px)
     }
}

@keyframes workerArmLeft {
     from {
          transform: rotate(27deg)
     }

     to {
          transform: rotate(-20deg)
     }
}

@keyframes workerArmRight {
     from {
          transform: rotate(-36deg)
     }

     to {
          transform: rotate(18deg)
     }
}

@keyframes workerLegLeft {
     from {
          transform: rotate(18deg)
     }

     to {
          transform: rotate(-16deg)
     }
}

@keyframes workerLegRight {
     from {
          transform: rotate(-18deg)
     }

     to {
          transform: rotate(16deg)
     }
}

@media(max-width:760px) {
     .factory-worker {
          width: 50px;
          height: 70px;
          transform: scale(.9);
          transform-origin: bottom center
     }

     .process-journey-v2 .journey-worker .carried-brief,
     .process-journey-v2 .journey-worker .carried-product {
          right: 0;
          bottom: 8px
     }
}

@media(prefers-reduced-motion:reduce) {

     .factory-worker,
     .factory-worker>i {
          animation: none !important
     }
}

/* Production truck replaces the worker character */
.process-truck {
     position: relative;
     display: block;
     width: 76px;
     height: 62px;
     color: var(--navy);
     filter: drop-shadow(0 6px 5px rgba(12, 28, 53, .22));
     transform-origin: bottom center
}

.process-truck>i {
     display: block !important;
     font-size: 4.8rem !important;
     line-height: 1;
     color: var(--navy)
}

.process-truck::before,
.process-truck::after {
     content: '';
     position: absolute;
     z-index: 4;
     bottom: 0;
     width: 14px;
     height: 14px;
     border: 3px solid #101a28;
     border-radius: 50%;
     background: #d9dee4
}

.process-truck::before {
     left: 10px
}

.process-truck::after {
     right: 8px
}

.process-truck em {
     position: absolute;
     z-index: 3;
     left: 17px;
     top: 22px;
     margin: 0;
     padding: 2px 5px;
     border-radius: 3px;
     background: var(--copper);
     color: #fff;
     font: 600 .48rem/1 Jost, sans-serif;
     letter-spacing: .06em
}

.truck-light {
     position: absolute;
     z-index: 5;
     right: 2px;
     top: 24px;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: #ffc400;
     box-shadow: 0 0 0 3px rgba(255, 196, 0, .22)
}

.journey-vehicle {
     width: 82px
}

.process-journey-v2 .journey-vehicle .carried-brief,
.process-journey-v2 .journey-vehicle .carried-product {
     right: 48px;
     bottom: 39px;
     width: 27px;
     height: 32px;
     font-size: 1rem
}

.process-journey-v2.is-running .process-truck {
     animation: truckDrive .42s ease-in-out infinite
}

.process-journey-v2.is-running .process-truck::before,
.process-journey-v2.is-running .process-truck::after {
     animation: truckWheel .42s linear infinite
}

@keyframes truckDrive {
     50% {
          transform: translateY(-2px) rotate(-1deg)
     }
}

@keyframes truckWheel {
     to {
          transform: rotate(360deg)
     }
}

@media(max-width:760px) {
     .journey-vehicle {
          width: 67px
     }

     .process-truck {
          width: 64px;
          height: 53px;
          transform: scale(.86);
          transform-origin: bottom left
     }

     .process-truck>i {
          font-size: 4.25rem !important
     }

     .process-journey-v2 .journey-vehicle .carried-brief,
     .process-journey-v2 .journey-vehicle .carried-product {
          right: 40px;
          bottom: 34px;
          width: 24px;
          height: 29px
     }
}

@media(prefers-reduced-motion:reduce) {

     .process-truck,
     .process-truck::before,
     .process-truck::after {
          animation: none !important
     }
}

/* Process pipeline v3: no character; each object follows the real workflow */
.process-pipeline .journey-route::after {
     content: '';
     position: absolute;
     inset: 0 auto 0 0;
     width: 0;
     background: linear-gradient(90deg, #02aee8, #ffc400, #ef087f);
     box-shadow: 0 0 10px rgba(2, 174, 232, .35)
}

.pipeline-brief {
     position: absolute;
     z-index: 7;
     left: 6%;
     bottom: 91px;
     width: 52px;
     height: 64px;
     display: grid;
     place-items: center;
     border: 3px solid #fff;
     border-radius: 8px;
     background: linear-gradient(145deg, #fff, #e8edf2);
     color: var(--navy);
     box-shadow: 0 8px 18px rgba(12, 28, 53, .18)
}

.pipeline-brief>i {
     font-size: 1.8rem
}

.pipeline-brief small,
.pipeline-screen small {
     position: absolute;
     bottom: 3px;
     font-size: .48rem;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase
}

.pipeline-screen {
     position: absolute;
     z-index: 7;
     left: 27%;
     bottom: 77px;
     width: 96px;
     height: 82px;
     display: grid;
     place-items: center;
     border: 5px solid var(--navy);
     border-radius: 9px;
     background: linear-gradient(145deg, #eefaff, #fff);
     color: var(--navy);
     box-shadow: 0 10px 22px rgba(12, 28, 53, .2)
}

.pipeline-screen::after {
     content: '';
     position: absolute;
     left: 36px;
     bottom: -15px;
     width: 24px;
     height: 14px;
     border: 5px solid var(--navy);
     border-top: 0
}

.pipeline-screen>i {
     font-size: 2.55rem;
     color: #04aedd
}

.pipeline-screen>b {
     position: absolute;
     right: -10px;
     top: -10px;
     width: 28px;
     height: 28px;
     display: grid;
     place-items: center;
     border: 3px solid #fff;
     border-radius: 50%;
     background: #18a766;
     color: #fff;
     font-size: 1rem;
     opacity: 0;
     transform: scale(.4)
}

.pipeline-transfer {
     position: absolute;
     z-index: 5;
     left: 42%;
     bottom: 100px;
     color: var(--copper);
     font-size: 2rem;
     opacity: .35
}

.process-pipeline .journey-track {
     left: 47%;
     right: 19%
}

.process-pipeline .journey-product {
     left: 49%
}

.process-pipeline.is-running .journey-route::after {
     animation: pipelineProgress 15s ease-in-out infinite
}

.process-pipeline.is-running .pipeline-brief {
     animation: briefToScreen 15s ease-in-out infinite
}

.process-pipeline.is-running .pipeline-screen {
     animation: screenWorking 15s ease-in-out infinite
}

.process-pipeline.is-running .pipeline-screen>b {
     animation: approvalCheck 15s ease-in-out infinite
}

.process-pipeline.is-running .pipeline-transfer {
     animation: transferPulse 15s ease-in-out infinite
}

.process-pipeline.is-running .journey-product {
     animation: pipelineProduct 15s ease-in-out infinite !important
}

.process-pipeline.is-running .machine-door {
     animation: pipelineDoor 15s ease-in-out infinite !important
}

.process-pipeline.is-running .machine-gear {
     animation: pipelineGear 15s linear infinite !important
}

.process-pipeline.is-running .journey-package {
     animation: pipelinePackage 15s ease-in-out infinite !important
}

.process-pipeline.is-running .journey-truck {
     animation: pipelineDelivery 15s ease-in-out infinite !important
}

.process-pipeline.is-running .journey-action span:nth-child(1) {
     animation: pPhaseOne 15s infinite
}

.process-pipeline.is-running .journey-action span:nth-child(2) {
     animation: pPhaseTwo 15s infinite
}

.process-pipeline.is-running .journey-action span:nth-child(3) {
     animation: pPhaseThree 15s infinite
}

.process-pipeline.is-running .journey-action span:nth-child(4) {
     animation: pPhaseFour 15s infinite
}

.process-pipeline.is-running .journey-action span:nth-child(5) {
     animation: pPhaseFive 15s infinite
}

.process-pipeline.is-running .journey-stations li:nth-child(1) {
     animation: pStationOne 15s infinite
}

.process-pipeline.is-running .journey-stations li:nth-child(2) {
     animation: pStationTwo 15s infinite
}

.process-pipeline.is-running .journey-stations li:nth-child(3) {
     animation: pStationThree 15s infinite
}

.process-pipeline.is-running .journey-stations li:nth-child(4) {
     animation: pStationFour 15s infinite
}

@keyframes pipelineProgress {

     0%,
     4% {
          width: 0
     }

     22% {
          width: 35%
     }

     42% {
          width: 61%
     }

     82% {
          width: 91%
     }

     100% {
          width: 100%
     }
}

@keyframes briefToScreen {

     0%,
     4% {
          left: 6%;
          opacity: 0;
          transform: translateY(-10px)
     }

     7%,
     14% {
          left: 8%;
          opacity: 1;
          transform: none
     }

     23% {
          left: 27%;
          opacity: 1;
          transform: scale(.82)
     }

     26%,
     100% {
          left: 27%;
          opacity: 0;
          transform: scale(.65)
     }
}

@keyframes screenWorking {

     0%,
     15% {
          transform: none;
          box-shadow: 0 10px 22px rgba(12, 28, 53, .2)
     }

     19%,
     31% {
          transform: translateY(-3px);
          box-shadow: 0 0 0 6px rgba(2, 174, 221, .12), 0 12px 26px rgba(12, 28, 53, .2)
     }

     35%,
     100% {
          transform: none
     }
}

@keyframes approvalCheck {

     0%,
     23% {
          opacity: 0;
          transform: scale(.4) rotate(-20deg)
     }

     27%,
     35% {
          opacity: 1;
          transform: scale(1) rotate(0)
     }

     39%,
     100% {
          opacity: 0;
          transform: scale(.6)
     }
}

@keyframes transferPulse {

     0%,
     33% {
          opacity: .25;
          transform: translateX(-5px)
     }

     37%,
     46% {
          opacity: 1;
          transform: translateX(8px)
     }

     50%,
     100% {
          opacity: .25;
          transform: translateX(-5px)
     }
}

@keyframes pipelineProduct {

     0%,
     38% {
          left: 49%;
          opacity: 0;
          transform: translateY(-26px) scale(.8)
     }

     42% {
          left: 49%;
          opacity: 1;
          transform: none
     }

     58% {
          left: 61%
     }

     72% {
          left: 73%
     }

     81% {
          left: 81%;
          opacity: 1;
          transform: scale(1)
     }

     85%,
     100% {
          left: 83%;
          opacity: 0;
          transform: scale(.5)
     }
}

@keyframes pipelineDoor {

     0%,
     81% {
          transform: scaleY(.03)
     }

     86%,
     92% {
          transform: scaleY(1)
     }

     96%,
     100% {
          transform: scaleY(.03)
     }
}

@keyframes pipelineGear {

     0%,
     38% {
          transform: rotate(0);
          opacity: .25
     }

     42%,
     83% {
          opacity: 1
     }

     86%,
     100% {
          transform: rotate(720deg);
          opacity: .25
     }
}

@keyframes pipelinePackage {

     0%,
     89% {
          opacity: 0;
          transform: translateY(-8px) scale(.65)
     }

     93%,
     97% {
          opacity: 1;
          transform: none
     }

     100% {
          opacity: 0
     }
}

@keyframes pipelineDelivery {

     0%,
     92% {
          right: -5%;
          opacity: 0
     }

     95% {
          right: 0;
          opacity: 1
     }

     98% {
          right: 4%;
          opacity: 1
     }

     100% {
          right: 9%;
          opacity: 0
     }
}

@keyframes pPhaseOne {

     0%,
     3%,
     17% {
          opacity: 0;
          transform: translateY(4px)
     }

     6%,
     14% {
          opacity: 1;
          transform: none
     }
}

@keyframes pPhaseTwo {

     0%,
     17%,
     38% {
          opacity: 0;
          transform: translateY(4px)
     }

     20%,
     35% {
          opacity: 1;
          transform: none
     }
}

@keyframes pPhaseThree {

     0%,
     36%,
     52% {
          opacity: 0;
          transform: translateY(4px)
     }

     40%,
     49% {
          opacity: 1;
          transform: none
     }
}

@keyframes pPhaseFour {

     0%,
     50%,
     88% {
          opacity: 0;
          transform: translateY(4px)
     }

     54%,
     85% {
          opacity: 1;
          transform: none
     }
}

@keyframes pPhaseFive {

     0%,
     88%,
     100% {
          opacity: 0;
          transform: translateY(4px)
     }

     92%,
     98% {
          opacity: 1;
          transform: none
     }
}

@keyframes pStationOne {

     5%,
     15% {
          border-color: var(--copper);
          box-shadow: 0 10px 28px rgba(174, 93, 45, .2)
     }

     0%,
     18%,
     100% {
          border-color: #e8e9ed
     }
}

@keyframes pStationTwo {

     19%,
     36% {
          border-color: #04aedd;
          box-shadow: 0 10px 28px rgba(2, 174, 221, .18)
     }

     0%,
     17%,
     39%,
     100% {
          border-color: #e8e9ed
     }
}

@keyframes pStationThree {

     40%,
     85% {
          border-color: var(--copper);
          box-shadow: 0 10px 28px rgba(174, 93, 45, .2)
     }

     0%,
     38%,
     88%,
     100% {
          border-color: #e8e9ed
     }
}

@keyframes pStationFour {

     89%,
     98% {
          border-color: #18a766;
          box-shadow: 0 10px 28px rgba(24, 167, 102, .18)
     }

     0%,
     87%,
     100% {
          border-color: #e8e9ed
     }
}

@media(max-width:760px) {
     .process-pipeline .pipeline-brief {
          left: 8px;
          top: 56px;
          bottom: auto;
          width: 46px;
          height: 55px
     }

     .process-pipeline .pipeline-screen {
          left: 2px;
          top: 184px;
          bottom: auto;
          width: 64px;
          height: 59px;
          border-width: 4px
     }

     .process-pipeline .pipeline-screen>i {
          font-size: 1.8rem
     }

     .process-pipeline .pipeline-screen::after {
          left: 22px;
          bottom: -12px;
          width: 18px;
          height: 11px;
          border-width: 4px
     }

     .process-pipeline .pipeline-transfer {
          left: 20px;
          top: 290px;
          bottom: auto;
          transform: rotate(90deg)
     }

     .process-pipeline .journey-track {
          left: 18px;
          right: auto;
          top: 340px;
          bottom: 49px
     }

     .process-pipeline .journey-product {
          left: 18px;
          top: 352px
     }

     .process-pipeline.is-running .pipeline-brief {
          animation-name: briefToScreenMobile
     }

     .process-pipeline.is-running .pipeline-transfer {
          animation-name: transferPulseMobile
     }

     .process-pipeline.is-running .journey-product {
          animation-name: pipelineProductMobile !important
     }

     .process-pipeline.is-running .journey-truck {
          animation-name: pipelineDeliveryMobile !important
     }
}

@keyframes briefToScreenMobile {

     0%,
     4% {
          top: 56px;
          opacity: 0;
          transform: translateY(-8px)
     }

     7%,
     14% {
          top: 65px;
          opacity: 1;
          transform: none
     }

     23% {
          top: 188px;
          opacity: 1;
          transform: scale(.72)
     }

     26%,
     100% {
          top: 188px;
          opacity: 0;
          transform: scale(.6)
     }
}

@keyframes transferPulseMobile {

     0%,
     33% {
          opacity: .25;
          transform: translateY(-5px) rotate(90deg)
     }

     37%,
     46% {
          opacity: 1;
          transform: translateY(8px) rotate(90deg)
     }

     50%,
     100% {
          opacity: .25;
          transform: translateY(-5px) rotate(90deg)
     }
}

@keyframes pipelineProductMobile {

     0%,
     38% {
          top: 352px;
          opacity: 0;
          transform: translateX(-20px) scale(.8)
     }

     42% {
          top: 352px;
          opacity: 1;
          transform: none
     }

     58% {
          top: 435px
     }

     72% {
          top: 515px
     }

     81% {
          top: 588px;
          opacity: 1;
          transform: scale(1)
     }

     85%,
     100% {
          top: 614px;
          opacity: 0;
          transform: scale(.5)
     }
}

@keyframes pipelineDeliveryMobile {

     0%,
     92% {
          left: 57px;
          opacity: 0
     }

     95% {
          left: 70px;
          opacity: 1
     }

     98% {
          left: 88px;
          opacity: 1
     }

     100% {
          left: 108px;
          opacity: 0
     }
}

@media(prefers-reduced-motion:reduce) {
     .process-pipeline .pipeline-brief {
          opacity: 1;
          left: 10%
     }

     .process-pipeline .pipeline-screen>b {
          opacity: 1;
          transform: none
     }

     .process-pipeline .journey-product {
          opacity: 1;
          left: 66%
     }

     .process-pipeline .journey-route::after {
          width: 100%
     }

     .process-pipeline .journey-action span {
          display: none
     }

     .process-pipeline .journey-action span:last-child {
          display: flex;
          opacity: 1
     }
}

/* Readable glass panel behind hero banner copy */
.diary-page .hero-content,
.calendar-page .hero-content {
     position: relative
}

.diary-page .hero-content::before,
.calendar-page .hero-content::before {
     content: none
}

.diary-page .hero-shade,
.calendar-page .hero-shade {
     background: linear-gradient(110deg, rgba(37, 21, 118, .82) 0%, rgba(48, 24, 124, .6) 34%, rgba(243, 3, 128, .2) 58%, rgba(255, 255, 255, 0) 80%)
}

.diary-page .hero-content>*,
.calendar-page .hero-content>* {
     position: relative;
     z-index: 1
}

.diary-page .hero-content h1,
.calendar-page .hero-content h1 {
     text-shadow: 0 3px 16px rgba(0, 0, 0, .28)
}

.diary-page .hero-content>p:not(.eyebrow),
.calendar-page .hero-content>p:not(.eyebrow) {
     color: rgba(255, 255, 255, .92);
     text-shadow: 0 2px 9px rgba(0, 0, 0, .25)
}

@media(max-width:760px) {
     .diary-page .hero-shade,
     .calendar-page .hero-shade {
          background: linear-gradient(110deg, rgba(37, 21, 118, .88), rgba(56, 25, 132, .68) 62%, rgba(243, 3, 128, .25))
     }

     .diary-page .hero-content h1,
     .calendar-page .hero-content h1 {
          font-size: clamp(2.15rem, 11vw, 2.8rem)
     }
}