/* EASYPRINT ABOUT PAPER NOTES V1 */

#about.ep-notes-section {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 92px 20px 112px !important;
  isolation: isolate;
}

#about .ep-notes-container {
  position: relative;
  z-index: 1;
  width: min(100%, 1190px);
  max-width: 1190px;
  margin: 0 auto;
}

#about .ep-notes-heading {
  max-width: 640px;
  margin: 0 auto 70px;
  text-align: center;
}

#about .ep-notes-kicker {
  display: block;
  color: #398db7;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .20em;
  margin-bottom: 13px;
}

#about .ep-notes-heading h2 {
  margin: 0 auto 17px;
  font-family: Arial, Helvetica, sans-serif;
  color: #184e83;
  font-size: clamp(35px, 3.25vw, 50px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.045em;
}

#about .ep-notes-heading h2 span {
  display: block;
}

#about .ep-notes-gradient {
  background: linear-gradient(105deg, #18b9ca, #3596dc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#about .ep-notes-heading p {
  max-width: 470px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.65;
  color: #587b92;
}

#about .ep-notes-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-items: center;
  gap: 25px;
  padding: 28px 5px 38px;
  perspective: 1100px;
}

#about .ep-note {
  --tilt: -3deg;
  --tone: #e4f4fb;
  --ink: #217cab;
  position: relative;
  min-width: 0;
  padding-top: 18px;
  transform: translateY(35px) rotate(calc(var(--tilt) - 3deg));
  opacity: 0;
  transition:
    opacity .7s ease,
    transform .85s cubic-bezier(.18,.75,.2,1);
  transition-delay: var(--delay,0ms);
}

#about .ep-note--one {
  --tilt: -5deg;
  --tone: #e4f4fc;
  --ink: #2485b2;
  --delay: 0ms;
  margin-top: 4px;
}

#about .ep-note--two {
  --tilt: 4deg;
  --tone: #e2f5f0;
  --ink: #268884;
  --delay: 160ms;
  margin-top: 42px;
}

#about .ep-note--three {
  --tilt: -3deg;
  --tone: #eaf0fc;
  --ink: #527db4;
  --delay: 320ms;
  margin-top: 14px;
}

#about .ep-note--four {
  --tilt: 5deg;
  --tone: #e2f7f8;
  --ink: #238e9d;
  --delay: 480ms;
  margin-top: 48px;
}

#about .ep-notes-board.is-revealed .ep-note {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt));
}

#about .ep-note-paper {
  position: relative;
  display: block;
  height: 252px;
  padding: 16px;
  background: linear-gradient(145deg,#fff,#fbfdff);
  border: 1px solid rgba(195,220,235,.8);
  border-radius: 23px;
  box-shadow:
    0 19px 30px rgba(40,101,142,.12),
    0 5px 9px rgba(40,101,142,.045);
  transform-origin: 50% 3%;
  transition: box-shadow .3s ease, transform .3s ease;
}

#about .ep-note-content {
  height: 100%;
  border-radius: 17px;
  padding: 25px 19px 20px;
  background: var(--tone);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#about .ep-note-number {
  font-size: 41px;
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1;
  color: var(--ink);
}

#about .ep-note-content h3 {
  margin: auto 0 9px;
  font-size: clamp(15px,1.2vw,18px);
  font-weight: 750;
  line-height: 1.2;
  color: #194b72;
}

#about .ep-note-content p {
  margin: 0;
  font-size: 12px;
  line-height: 1.53;
  color: #315a74;
}

#about .ep-note-tape {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 38px;
  height: 51px;
  background: rgba(88,194,220,.64);
  border: 1px solid rgba(95,177,195,.25);
  box-shadow: 0 2px 4px rgba(26,94,122,.08);
  transform: translateX(-50%) rotate(-8deg);
  clip-path: polygon(3% 0,97% 1%,100% 98%,4% 100%);
}

#about .ep-note--two .ep-note-tape {
  background: rgba(91,205,164,.57);
  transform: translateX(-50%) rotate(5deg);
}
#about .ep-note--three .ep-note-tape {
  background: rgba(131,163,232,.55);
  transform: translateX(-50%) rotate(-4deg);
}
#about .ep-note--four .ep-note-tape {
  background: rgba(78,204,205,.59);
  transform: translateX(-50%) rotate(9deg);
}

#about .ep-note-curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45px;
  height: 45px;
  pointer-events: none;
  border-radius: 0 0 22px 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 43%,
    rgba(194,225,239,.66) 73%,
    rgba(250,254,255,.96) 100%
  );
  opacity: .6;
  transform-origin: bottom right;
}

#about .ep-notes-board.is-revealed .ep-note-paper {
  animation: epNoteBreeze 5.5s ease-in-out infinite alternate;
}

#about .ep-note--two .ep-note-paper {animation-delay: -.8s !important}
#about .ep-note--three .ep-note-paper {animation-delay: -2s !important}
#about .ep-note--four .ep-note-paper {animation-delay: -3s !important}

#about .ep-notes-board.is-revealed .ep-note-curl {
  animation: epNoteCurl 4.6s ease-in-out infinite alternate;
}

@keyframes epNoteBreeze {
  0%,100% {transform: rotate(0deg) rotateX(0deg)}
  50% {transform: rotate(.65deg) rotateX(1.4deg)}
}

@keyframes epNoteCurl {
  from {transform: rotate(0deg) scale(.85);opacity:.4}
  to {transform: rotate(-8deg) scale(1.05);opacity:.9}
}

@media (hover:hover) {
  #about .ep-note:hover {
    z-index: 5;
  }
  #about .ep-note:hover .ep-note-paper {
    animation-play-state: paused;
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 0 28px 44px rgba(39,103,147,.17);
  }
}

@media (max-width:1050px) {
  #about .ep-notes-container {max-width:730px}
  #about .ep-notes-board {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 25px 35px;
  }
  #about .ep-note {margin-top:0}
  #about .ep-note-paper {height:255px}
}

@media (max-width:620px) {
  #about.ep-notes-section {padding:78px 18px 86px !important}
  #about .ep-notes-heading {margin-bottom:35px}
  #about .ep-notes-heading h2 {
    font-size:clamp(31px,8.4vw,41px);
  }
  #about .ep-notes-heading p {
    font-size:13px;
  }
  #about .ep-notes-board {
    max-width:340px;
    margin:0 auto;
    grid-template-columns:minmax(0,1fr);
    gap:21px;
    padding:15px 16px 24px;
  }
  #about .ep-note-paper {height:225px}
  #about .ep-note-content {padding:21px 22px}
  #about .ep-note-content h3 {font-size:17px}
}

@media (prefers-reduced-motion:reduce) {
  #about .ep-note {
    opacity:1!important;
    transform:rotate(var(--tilt))!important;
    transition:none!important;
  }
  #about .ep-note-paper,
  #about .ep-note-curl {
    animation:none!important;
    transition:none!important;
  }
}

/* ============================================================
   EASYPRINT ABOUT NOTES V1.1 BREEZE POLISH
   Smaller cards, unified blue palette, visible automatic breeze
============================================================ */

/* Give the composition a little more breathing room */

#about .ep-notes-container {
    max-width: 1110px !important;
}

#about .ep-notes-board {
    max-width: 1050px;
    margin: 0 auto;
    gap: 29px;
    padding-top: 20px;
    padding-bottom: 48px;
    perspective: 1100px;
}

/* Replace unrelated pastels with EasyPrint shades */

#about .ep-note--one {
    --tone: #eaf7fd;
    --ink: #2687b6;
}

#about .ep-note--two {
    --tone: #eef9ff;
    --ink: #247ba8;
}

#about .ep-note--three {
    --tone: #e8f4fc;
    --ink: #287caf;
}

#about .ep-note--four {
    --tone: #e9f9fc;
    --ink: #208ea9;
}

/* Slightly smaller, softer paper */

#about .ep-note-paper {
    height: 222px;
    padding: 13px;
    border-radius: 18px;
    border-color: rgba(190, 221, 239, .82);
    background: linear-gradient(
        145deg, #fff 0%, #fafdff 100%
    );
    box-shadow:
        0 16px 30px rgba(34, 107, 155, .10),
        0 5px 11px rgba(34, 107, 155, .04);
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    will-change: transform;
}

#about .ep-note-content {
    border-radius: 13px;
    padding: 20px 16px 17px;
}

#about .ep-note-number {
    font-size: 35px;
}

#about .ep-note-content h3 {
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 8px;
}

#about .ep-note-content p {
    font-size: 11.2px;
    line-height: 1.5;
}

/* Tape: all within the blue/cyan design family */

#about .ep-note-tape,
#about .ep-note--two .ep-note-tape,
#about .ep-note--three .ep-note-tape,
#about .ep-note--four .ep-note-tape {
    width: 32px;
    height: 44px;
    background: rgba(86, 190, 221, .50);
    border-color: rgba(91, 174, 203, .16);
    backdrop-filter: blur(1px);
}

#about .ep-note--two .ep-note-tape {
    background: rgba(90, 201, 222, .45);
}

#about .ep-note--three .ep-note-tape {
    background: rgba(105, 169, 222, .48);
}

#about .ep-note--four .ep-note-tape {
    background: rgba(78, 201, 207, .45);
}

/* Paper corner: larger visible curl with a folding shadow */

#about .ep-note-curl {
    width: 55px;
    height: 55px;
    right: -1px;
    bottom: -1px;
    border-radius: 0 0 17px 0;
    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 43%,
            rgba(120, 177, 209, .14) 47%,
            rgba(220, 241, 251, .96) 65%,
            #ffffff 94%
        );
    filter: drop-shadow(-3px -4px 3px rgba(44, 108, 155, .12));
    transform-origin: bottom right;
    opacity: .8;
    z-index: 2;
}

/*
   The note stays anchored at the top.
   Its lower edge tilts forward and backward with
   a soft perspective change rather than bouncing.
*/

#about .ep-notes-board.is-revealed .ep-note-paper {
    animation: epAboutWindV11 4.8s ease-in-out infinite !important;
}

#about .ep-note--one .ep-note-paper {
    animation-delay: -.7s !important;
}

#about .ep-note--two .ep-note-paper {
    animation-delay: -2.1s !important;
}

#about .ep-note--three .ep-note-paper {
    animation-delay: -3.4s !important;
}

#about .ep-note--four .ep-note-paper {
    animation-delay: -1.3s !important;
}

@keyframes epAboutWindV11 {
    0%, 100% {
        transform: perspective(850px)
                   rotateX(0deg)
                   rotateZ(0deg);
    }
    35% {
        transform: perspective(850px)
                   rotateX(-5deg)
                   rotateZ(.65deg);
    }
    68% {
        transform: perspective(850px)
                   rotateX(2deg)
                   rotateZ(-.45deg);
    }
}

/* The corner lifts at a different rhythm */

#about .ep-notes-board.is-revealed .ep-note-curl {
    animation: epAboutCornerV11 3.5s ease-in-out infinite alternate !important;
}

@keyframes epAboutCornerV11 {
    0% {
        transform: scale(.55) rotate(0deg);
        opacity: .3;
    }
    50% {
        transform: scale(1) rotate(-5deg);
        opacity: .85;
    }
    100% {
        transform: scale(1.15) rotate(-10deg);
        opacity: 1;
    }
}

/* Hover is stronger but doesn't need to be clicked */

@media (hover:hover) {
    #about .ep-note:hover .ep-note-paper {
        animation-play-state: paused !important;
        transform: translateY(-8px) rotate(-1deg) !important;
        box-shadow: 0 24px 44px rgba(39,103,147,.17);
    }
}

/* Tablet */

@media (min-width:621px) and (max-width:1050px) {
    #about .ep-notes-board {
        max-width: 660px;
        gap: 28px 32px;
    }
    #about .ep-note-paper {
        height: 224px;
    }
}

/* Mobile */

@media (max-width:620px) {
    #about .ep-notes-board {
        max-width: 310px;
        gap: 25px;
    }
    #about .ep-note-paper {
        height: 210px;
    }
    #about .ep-note-content {
        padding: 19px 18px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion:reduce) {
    #about .ep-notes-board.is-revealed .ep-note-paper,
    #about .ep-notes-board.is-revealed .ep-note-curl {
        animation: none !important;
        will-change: auto;
    }
}

/* ==========================================================
   EASYPRINT ABOUT NOTES V1.2 PAPER LIFT
   Sequential entrance and full lower-edge wind movement
========================================================== */

/* Entrance: each note becomes visible individually */

#about .ep-notes-board.is-revealed .ep-note {
    opacity: 0 !important;
    transform:
        translateY(40px)
        rotate(calc(var(--tilt) - 4deg))
        scale(.94) !important;

    transition:
        opacity .65s ease,
        transform .85s cubic-bezier(.18,.75,.2,1) !important;

    transition-delay: 0ms !important;
}

#about .ep-notes-board.is-revealed .ep-note.is-appeared {
    opacity: 1 !important;

    transform:
        translateY(0)
        rotate(var(--tilt))
        scale(1) !important;
}

/* Paper stays mounted at the upper edge */

#about .ep-note-paper {
    position: relative;
    transform-style: preserve-3d;
    perspective: 750px;
    overflow: visible !important;
}

/* Disable old corner shadow and whole-card wind */

#about .ep-note-curl {
    display: none !important;
}

#about .ep-notes-board.is-revealed .ep-note-paper {
    animation: none !important;
}

/*
  Lower paper shadow:
  changes beneath the moving paper edge.
*/

#about .ep-note-paper::before {
    content: "";
    position: absolute;

    left: 12px;
    right: 12px;
    bottom: -12px;

    height: 32px;

    border-radius: 50%;
    background: rgba(36, 112, 157, .20);

    filter: blur(13px);
    opacity: .38;

    pointer-events: none;
    z-index: -1;
}

/*
  Moving paper flap:
  a separate bottom surface, hinged along its top edge.
  The full lower edge lifts instead of only one corner.
*/

#about .ep-note-paper::after {
    content: "";
    position: absolute;

    left: 2px;
    right: 2px;
    bottom: -1px;

    height: 38px;

    border-radius: 0 0 17px 17px;

    background:
        linear-gradient(
            180deg,
            rgba(235, 247, 253, .18) 0%,
            rgba(243, 251, 255, .8) 40%,
            #ffffff 100%
        );

    border-bottom: 1px solid rgba(151, 203, 228, .5);

    box-shadow:
        0 8px 12px rgba(34, 111, 158, .08),
        inset 0 -5px 8px rgba(182, 220, 241, .12);

    transform-origin: 50% 0%;
    transform: perspective(450px) rotateX(0deg);

    backface-visibility: visible;
    pointer-events: none;
    z-index: 2;
}

/* Breeze starts after each note has appeared */

#about .ep-note.is-appeared .ep-note-paper::after {
    animation: epPaperLowerWind 3.8s ease-in-out infinite;
}

#about .ep-note.is-appeared .ep-note-paper::before {
    animation: epPaperWindShadow 3.8s ease-in-out infinite;
}

#about .ep-note--one .ep-note-paper::after,
#about .ep-note--one .ep-note-paper::before {
    animation-delay: -.4s !important;
}

#about .ep-note--two .ep-note-paper::after,
#about .ep-note--two .ep-note-paper::before {
    animation-delay: -1.4s !important;
}

#about .ep-note--three .ep-note-paper::after,
#about .ep-note--three .ep-note-paper::before {
    animation-delay: -2.6s !important;
}

#about .ep-note--four .ep-note-paper::after,
#about .ep-note--four .ep-note-paper::before {
    animation-delay: -.9s !important;
}

/* Physical-looking lower-edge flutter */

@keyframes epPaperLowerWind {
    0%, 100% {
        transform: perspective(450px) rotateX(0deg);
        box-shadow:
            0 5px 9px rgba(34,111,158,.04),
            inset 0 -4px 8px rgba(182,220,241,.10);
    }

    25% {
        transform: perspective(450px) rotateX(14deg);
    }

    48% {
        transform: perspective(450px) rotateX(43deg);
        box-shadow:
            0 16px 21px rgba(34,111,158,.19),
            inset 0 -8px 14px rgba(177,215,234,.22);
    }

    72% {
        transform: perspective(450px) rotateX(18deg);
    }
}

@keyframes epPaperWindShadow {
    0%, 100% {
        opacity: .23;
        transform: scaleX(.83) translateY(0);
    }

    48% {
        opacity: .67;
        transform: scaleX(1.04) translateY(5px);
    }
}

/* Hover: stronger lift, not a different animation */

@media (hover: hover) {
    #about .ep-note:hover .ep-note-paper::after,
    #about .ep-note:hover .ep-note-paper::before {
        animation-play-state: paused !important;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    #about .ep-note,
    #about .ep-notes-board.is-revealed .ep-note {
        opacity: 1 !important;
        transform: rotate(var(--tilt)) !important;
        transition: none !important;
    }

    #about .ep-note-paper::before,
    #about .ep-note-paper::after {
        animation: none !important;
    }
}