.elementor-402 .elementor-element.elementor-element-8a9cc5f{--display:flex;}.elementor-402 .elementor-element.elementor-element-d04f1ce{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-402 .elementor-element.elementor-element-d5f4152{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-402 .elementor-element.elementor-element-ae37d66{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-402 .elementor-element.elementor-element-40ac06e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-402 .elementor-element.elementor-element-047390c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-402 .elementor-element.elementor-element-8a9cc5f{--width:100%;}.elementor-402 .elementor-element.elementor-element-d04f1ce{--width:100%;}.elementor-402 .elementor-element.elementor-element-d5f4152{--width:100%;}.elementor-402 .elementor-element.elementor-element-ae37d66{--width:100%;}.elementor-402 .elementor-element.elementor-element-40ac06e{--width:100%;}.elementor-402 .elementor-element.elementor-element-047390c{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-d04f1ce *//* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 01 — A LITTLE WONDER, ON US
   CSS DESKTOP v1.0
   Scope: #wh-fp-hero
   ========================================================== */

@media (min-width: 1025px) {

  /* 01 — SECTION FOUNDATION */

  #wh-fp-hero {
    --fp-cream: #FFF9F0;
    --fp-ink: #202626;
    --fp-muted: #626969;
    --fp-coral: #F17A68;
    --fp-teal: #198E88;
    --fp-gold: #F3BE56;

    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fp-cream);
  }

  #wh-fp-hero,
  #wh-fp-hero * {
    box-sizing: border-box;
  }

  #wh-fp-hero .wh-fph {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 125px clamp(40px, 6vw, 110px) 48px;
    color: var(--fp-ink);
    font-family: "Inter", sans-serif;
  }

  /* 02 — AMBIENT DETAILS */

  #wh-fp-hero .wh-fph__ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  #wh-fp-hero .wh-fph__ambient-circle {
    position: absolute;
    width: 560px;
    height: 560px;
    right: -150px;
    top: -270px;
    border-radius: 50%;
    background: rgba(243,190,86,.13);
  }

  #wh-fp-hero .wh-fph__ambient-spark {
    position: absolute;
    width: 14px;
    height: 14px;
    left: 48%;
    top: 24%;
    background: var(--fp-coral);
    transform: rotate(45deg);
    opacity: .8;
  }

  #wh-fp-hero .wh-fph__ambient-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 18%;
    left: 8%;
    border-radius: 50%;
    background: var(--fp-teal);
    opacity: .45;
  }

  /* 03 — TWO-COLUMN EDITORIAL LAYOUT */

  #wh-fp-hero .wh-fph__layout {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: clamp(35px, 4vw, 85px);
    flex: 1;
  }

  /* 04 — LEFT CONTENT */

  #wh-fp-hero .wh-fph__content {
    position: relative;
    z-index: 3;
    max-width: 740px;
  }

  #wh-fp-hero .wh-fph__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    color: var(--fp-teal);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .19em;
    line-height: 1.5;
  }

  #wh-fp-hero .wh-fph__eyebrow-line {
    width: 30px;
    height: 2px;
    flex: 0 0 30px;
    background: currentColor;
  }

  #wh-fp-hero .wh-fph__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 29px;
    padding: 0;
    color: var(--fp-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(66px, 6.7vw, 116px);
    font-weight: 800;
    line-height: .99;
    letter-spacing: -.065em;
    text-wrap: balance;
  }

  #wh-fp-hero .wh-fph__title-accent {
    color: var(--fp-coral);
  }

  #wh-fp-hero .wh-fph__title-last {
    position: relative;
  }

  #wh-fp-hero .wh-fph__description {
    max-width: 490px;
    margin: 0;
    color: var(--fp-muted);
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: -.012em;
  }

  /* 05 — CTA */

  #wh-fp-hero .wh-fph__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 23px;
    margin-top: 35px;
  }

  #wh-fp-hero .wh-fph__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 59px;
    padding: 15px 24px 15px 29px;
    border: 1px solid var(--fp-coral);
    border-radius: 100px;
    background: var(--fp-coral);
    color: #202626;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .005em;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(241,122,104,.13);
    transition:
      background .3s ease,
      border-color .3s ease,
      color .3s ease,
      transform .3s ease,
      box-shadow .3s ease;
  }

  #wh-fp-hero .wh-fph__cta svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    transition: transform .3s ease;
  }

  #wh-fp-hero .wh-fph__cta:hover {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(32,38,38,.16);
  }

  #wh-fp-hero .wh-fph__cta:hover svg {
    transform: translateX(4px);
  }

  #wh-fp-hero .wh-fph__cta:focus-visible {
    outline: 3px solid var(--fp-teal);
    outline-offset: 4px;
  }

  #wh-fp-hero .wh-fph__free-note {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--fp-muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  #wh-fp-hero .wh-fph__free-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fp-teal);
  }

  /* 06 — RIGHT CREATIVE CANVAS */

  #wh-fp-hero .wh-fph__visual {
    position: relative;
    width: 100%;
    max-width: 620px;
    height: clamp(490px, 40vw, 640px);
    margin: 0 auto;
    perspective: 1200px;
  }

  #wh-fp-hero .wh-fph__visual::before {
    content: "";
    position: absolute;
    width: 88%;
    aspect-ratio: 1;
    left: 7%;
    top: 6%;
    border-radius: 50%;
    background: #F8EEDC;
    opacity: .82;
    z-index: 0;
  }

  #wh-fp-hero .wh-fph__star {
    position: absolute;
    width: 106px;
    height: 106px;
    right: 0;
    top: 6%;
    z-index: 1;
    transform: rotate(15deg);
  }

  /* 07 — PAPER SYSTEM */

  #wh-fp-hero .wh-fph__paper {
    position: absolute;
    width: 57%;
    aspect-ratio: 260 / 330;
    padding: 11px;
    background: #FFFFFF;
    border: 1px solid rgba(32,38,38,.07);
    border-radius: 5px;
    box-shadow:
      0 16px 34px rgba(63,57,47,.13),
      0 4px 10px rgba(63,57,47,.06);
    transform-origin: center center;
    transition:
      transform .55s cubic-bezier(.2,.75,.2,1),
      box-shadow .55s ease;
  }

  #wh-fp-hero .wh-fph__paper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FFFCF7;
    border: 1px solid #F0EBE5;
  }

  #wh-fp-hero .wh-fph__paper--back {
    top: 8%;
    left: 1%;
    z-index: 2;
    transform: rotate(-18deg);
  }

  #wh-fp-hero .wh-fph__paper--middle {
    top: 19%;
    right: 0;
    z-index: 3;
    transform: rotate(15deg);
  }

  #wh-fp-hero .wh-fph__paper--front {
    top: 12%;
    left: 23%;
    z-index: 4;
    transform: rotate(-3deg);
    padding: 12px;
    box-shadow:
      0 26px 50px rgba(63,57,47,.19),
      0 6px 15px rgba(63,57,47,.08);
  }

  #wh-fp-hero .wh-fph__paper--back svg,
  #wh-fp-hero .wh-fph__paper--middle svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* 08 — FRONT PAPER DETAILS */

  #wh-fp-hero .wh-fph__paper--front .wh-fph__paper-inner {
    display: flex;
    flex-direction: column;
    background: #FFFCF7;
  }

  #wh-fp-hero .wh-fph__paper-header,
  #wh-fp-hero .wh-fph__paper-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 14px;
    color: #384947;
    font-family: "Inter", sans-serif;
    font-size: clamp(6px, .55vw, 9px);
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.3;
  }

  #wh-fp-hero .wh-fph__paper-header span:last-child {
    color: #8B9290;
    text-align: right;
  }

  #wh-fp-hero .wh-fph__paper-art {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1;
  }

  #wh-fp-hero .wh-fph__paper-footer {
    padding-top: 5px;
    color: var(--fp-teal);
    font-size: clamp(6px, .55vw, 8px);
  }

  #wh-fp-hero .wh-fph__paper-footer svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  /* 09 — FLOATING ACCENTS */

  #wh-fp-hero .wh-fph__floating-label {
    position: absolute;
    z-index: 6;
    left: 0;
    bottom: 10%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 19px;
    border-radius: 100px;
    background: #FFFFFF;
    color: var(--fp-ink);
    box-shadow: 0 12px 30px rgba(32,38,38,.1);
    transform: rotate(-6deg);
  }

  #wh-fp-hero .wh-fph__floating-label svg {
    width: 18px;
    height: 18px;
    color: var(--fp-teal);
  }

  #wh-fp-hero .wh-fph__floating-label span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    white-space: nowrap;
  }

  #wh-fp-hero .wh-fph__scribble {
    position: absolute;
    width: 100px;
    right: -2%;
    bottom: 9%;
    z-index: 5;
    transform: rotate(-12deg);
  }

  /* 10 — HOVER: PAPER LIFT */

  #wh-fp-hero .wh-fph__visual:hover .wh-fph__paper--back {
    transform: translate(-12px,-13px) rotate(-22deg);
  }

  #wh-fp-hero .wh-fph__visual:hover .wh-fph__paper--middle {
    transform: translate(13px,-9px) rotate(19deg);
  }

  #wh-fp-hero .wh-fph__visual:hover .wh-fph__paper--front {
    transform: translateY(-17px) rotate(-1deg);
    box-shadow:
      0 35px 65px rgba(63,57,47,.21),
      0 8px 20px rgba(63,57,47,.1);
  }

  /* 11 — BOTTOM MICROCOPY */

  #wh-fp-hero .wh-fph__bottom {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1500px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    color: #8C918F;
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .16em;
    line-height: 1.5;
  }

  #wh-fp-hero .wh-fph__bottom-rule {
    flex: 1;
    height: 1px;
    background: #E5E2DC;
  }

  /* 12 — LOWER HEIGHT DESKTOP */

  @media (max-height: 760px) {
    #wh-fp-hero .wh-fph {
      padding-top: 110px;
      padding-bottom: 32px;
    }

    #wh-fp-hero .wh-fph__visual {
      height: 480px;
    }

    #wh-fp-hero .wh-fph__title {
      font-size: clamp(60px, 6vw, 94px);
    }
  }

  /* 13 — REDUCED MOTION */

  @media (prefers-reduced-motion: reduce) {
    #wh-fp-hero .wh-fph__paper,
    #wh-fp-hero .wh-fph__cta,
    #wh-fp-hero .wh-fph__cta svg {
      transition: none;
    }

    #wh-fp-hero .wh-fph__visual:hover .wh-fph__paper--back {
      transform: rotate(-18deg);
    }

    #wh-fp-hero .wh-fph__visual:hover .wh-fph__paper--middle {
      transform: rotate(15deg);
    }

    #wh-fp-hero .wh-fph__visual:hover .wh-fph__paper--front {
      transform: rotate(-3deg);
    }
  }

}







/* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 01 — A LITTLE WONDER, ON US
   CSS TABLET & MOBILE v1.0
   Scope: #wh-fp-hero
   Desktop remains untouched.
   ========================================================== */


/* ==========================================================
   01 — TABLET | 768px–1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  #wh-fp-hero {
    --fp-cream: #FFF9F0;
    --fp-ink: #202626;
    --fp-muted: #626969;
    --fp-coral: #F17A68;
    --fp-teal: #198E88;
    --fp-gold: #F3BE56;

    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--fp-cream);
  }

  #wh-fp-hero,
  #wh-fp-hero * {
    box-sizing: border-box;
  }

  #wh-fp-hero .wh-fph {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100svh;
    padding: 120px 4.5vw 35px;
    color: var(--fp-ink);
    font-family: "Inter", sans-serif;
  }

  /* TABLET — AMBIENT */

  #wh-fp-hero .wh-fph__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #wh-fp-hero .wh-fph__ambient-circle {
    position: absolute;
    width: 370px;
    height: 370px;
    right: -140px;
    top: -160px;
    border-radius: 50%;
    background: rgba(243,190,86,.13);
  }

  #wh-fp-hero .wh-fph__ambient-spark {
    position: absolute;
    width: 11px;
    height: 11px;
    left: 47%;
    top: 26%;
    background: var(--fp-coral);
    transform: rotate(45deg);
  }

  #wh-fp-hero .wh-fph__ambient-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    left: 7%;
    bottom: 15%;
    border-radius: 50%;
    background: var(--fp-teal);
    opacity: .45;
  }

  /* TABLET — LAYOUT */

  #wh-fp-hero .wh-fph__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: 2.5vw;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    flex: 1;
  }

  #wh-fp-hero .wh-fph__content {
    position: relative;
    z-index: 3;
    min-width: 0;
  }

  #wh-fp-hero .wh-fph__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--fp-teal);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .14em;
    line-height: 1.5;
  }

  #wh-fp-hero .wh-fph__eyebrow-line {
    width: 22px;
    height: 2px;
    flex: 0 0 22px;
    background: currentColor;
  }

  #wh-fp-hero .wh-fph__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 24px;
    padding: 0;
    color: var(--fp-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(47px, 6.4vw, 68px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.06em;
  }

  #wh-fp-hero .wh-fph__title-accent {
    color: var(--fp-coral);
  }

  #wh-fp-hero .wh-fph__description {
    max-width: 380px;
    margin: 0;
    color: var(--fp-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
  }

  /* TABLET — CTA */

  #wh-fp-hero .wh-fph__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 17px;
    margin-top: 27px;
  }

  #wh-fp-hero .wh-fph__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 52px;
    padding: 14px 19px;
    border: 1px solid var(--fp-coral);
    border-radius: 100px;
    background: var(--fp-coral);
    color: var(--fp-ink);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
    transition:
      background .3s ease,
      color .3s ease,
      transform .3s ease;
  }

  #wh-fp-hero .wh-fph__cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
  }

  #wh-fp-hero .wh-fph__cta:hover {
    background: var(--fp-ink);
    border-color: var(--fp-ink);
    color: #FFFFFF;
    transform: translateY(-2px);
  }

  #wh-fp-hero .wh-fph__cta:focus-visible {
    outline: 3px solid var(--fp-teal);
    outline-offset: 4px;
  }

  #wh-fp-hero .wh-fph__free-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fp-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  #wh-fp-hero .wh-fph__free-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fp-teal);
  }

  /* TABLET — CREATIVE PAPERS */

  #wh-fp-hero .wh-fph__visual {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: clamp(360px, 46vw, 480px);
    margin: 0 auto;
    perspective: 1200px;
  }

  #wh-fp-hero .wh-fph__visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 94%;
    aspect-ratio: 1;
    left: 3%;
    top: 6%;
    border-radius: 50%;
    background: #F8EEDC;
  }

  #wh-fp-hero .wh-fph__star {
    position: absolute;
    z-index: 1;
    top: 4%;
    right: 0;
    width: 70px;
    height: 70px;
    transform: rotate(15deg);
  }

  #wh-fp-hero .wh-fph__paper {
    position: absolute;
    width: 59%;
    aspect-ratio: 260 / 330;
    padding: 7px;
    background: #FFFFFF;
    border: 1px solid rgba(32,38,38,.07);
    border-radius: 4px;
    box-shadow: 0 12px 25px rgba(63,57,47,.13);
    transform-origin: center;
    transition: transform .4s ease;
  }

  #wh-fp-hero .wh-fph__paper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FFFCF7;
    border: 1px solid #F0EBE5;
  }

  #wh-fp-hero .wh-fph__paper--back {
    top: 10%;
    left: 0;
    z-index: 2;
    transform: rotate(-17deg);
  }

  #wh-fp-hero .wh-fph__paper--middle {
    top: 20%;
    right: 0;
    z-index: 3;
    transform: rotate(15deg);
  }

  #wh-fp-hero .wh-fph__paper--front {
    top: 14%;
    left: 21%;
    z-index: 4;
    transform: rotate(-3deg);
    box-shadow: 0 19px 34px rgba(63,57,47,.18);
  }

  #wh-fp-hero .wh-fph__paper--back svg,
  #wh-fp-hero .wh-fph__paper--middle svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  #wh-fp-hero .wh-fph__paper--front .wh-fph__paper-inner {
    display: flex;
    flex-direction: column;
  }

  #wh-fp-hero .wh-fph__paper-header,
  #wh-fp-hero .wh-fph__paper-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 10px 8px;
    color: #384947;
    font-family: "Inter", sans-serif;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.3;
  }

  #wh-fp-hero .wh-fph__paper-header span:last-child {
    color: #8B9290;
    text-align: right;
  }

  #wh-fp-hero .wh-fph__paper-art {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1;
  }

  #wh-fp-hero .wh-fph__paper-footer {
    padding-top: 3px;
    color: var(--fp-teal);
  }

  #wh-fp-hero .wh-fph__paper-footer svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
  }

  #wh-fp-hero .wh-fph__floating-label {
    position: absolute;
    z-index: 6;
    bottom: 8%;
    left: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 13px;
    border-radius: 100px;
    background: #FFFFFF;
    color: var(--fp-ink);
    box-shadow: 0 9px 22px rgba(32,38,38,.1);
    transform: rotate(-6deg);
  }

  #wh-fp-hero .wh-fph__floating-label svg {
    width: 15px;
    height: 15px;
    color: var(--fp-teal);
  }

  #wh-fp-hero .wh-fph__floating-label span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    white-space: nowrap;
  }

  #wh-fp-hero .wh-fph__scribble {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 8%;
    width: 67px;
    transform: rotate(-12deg);
  }

  /* TABLET — FOOTNOTE */

  #wh-fp-hero .wh-fph__bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin: 22px auto 0;
    color: #8C918F;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .12em;
  }

  #wh-fp-hero .wh-fph__bottom-rule {
    flex: 1;
    height: 1px;
    background: #E5E2DC;
  }

}


/* ==========================================================
   02 — MOBILE | UP TO 767px
   ========================================================== */

@media (max-width: 767px) {

  #wh-fp-hero {
    --fp-cream: #FFF9F0;
    --fp-ink: #202626;
    --fp-muted: #626969;
    --fp-coral: #F17A68;
    --fp-teal: #198E88;
    --fp-gold: #F3BE56;

    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--fp-cream);
  }

  #wh-fp-hero,
  #wh-fp-hero * {
    box-sizing: border-box;
  }

  #wh-fp-hero .wh-fph {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 100svh;
    padding: 125px 22px 30px;
    color: var(--fp-ink);
    font-family: "Inter", sans-serif;
  }

  /* MOBILE — AMBIENT */

  #wh-fp-hero .wh-fph__ambient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #wh-fp-hero .wh-fph__ambient-circle {
    position: absolute;
    width: 290px;
    height: 290px;
    top: -135px;
    right: -140px;
    border-radius: 50%;
    background: rgba(243,190,86,.13);
  }

  #wh-fp-hero .wh-fph__ambient-spark {
    position: absolute;
    width: 9px;
    height: 9px;
    top: 32%;
    right: 9%;
    background: var(--fp-coral);
    transform: rotate(45deg);
  }

  #wh-fp-hero .wh-fph__ambient-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    bottom: 10%;
    left: 8%;
    border-radius: 50%;
    background: var(--fp-teal);
    opacity: .45;
  }

  /* MOBILE — VERTICAL COMPOSITION */

  #wh-fp-hero .wh-fph__layout {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  #wh-fp-hero .wh-fph__content {
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 0;
  }

  #wh-fp-hero .wh-fph__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: var(--fp-teal);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .11em;
    line-height: 1.5;
  }

  #wh-fp-hero .wh-fph__eyebrow-line {
    width: 20px;
    height: 2px;
    flex: 0 0 20px;
    background: currentColor;
  }

  #wh-fp-hero .wh-fph__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 21px;
    padding: 0;
    color: var(--fp-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(45px, 11.5vw, 76px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.065em;
  }

  #wh-fp-hero .wh-fph__title-accent {
    color: var(--fp-coral);
  }

  #wh-fp-hero .wh-fph__description {
    max-width: 440px;
    margin: 0;
    color: var(--fp-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: -.01em;
  }

  /* MOBILE — CTA */

  #wh-fp-hero .wh-fph__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
  }

  #wh-fp-hero .wh-fph__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 53px;
    padding: 14px 21px;
    border: 1px solid var(--fp-coral);
    border-radius: 100px;
    background: var(--fp-coral);
    color: var(--fp-ink);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    text-decoration: none;
    transition:
      background .3s ease,
      color .3s ease,
      transform .3s ease;
  }

  #wh-fp-hero .wh-fph__cta svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
  }

  #wh-fp-hero .wh-fph__cta:focus-visible {
    outline: 3px solid var(--fp-teal);
    outline-offset: 4px;
  }

  #wh-fp-hero .wh-fph__free-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--fp-muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  #wh-fp-hero .wh-fph__free-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fp-teal);
  }

  /* MOBILE — PAPER COMPOSITION */

  #wh-fp-hero .wh-fph__visual {
    position: relative;
    width: min(100%, 430px);
    height: clamp(310px, 93vw, 440px);
    margin: 5px auto 0;
    perspective: 1200px;
  }

  #wh-fp-hero .wh-fph__visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 85%;
    aspect-ratio: 1;
    left: 8%;
    top: 4%;
    border-radius: 50%;
    background: #F8EEDC;
  }

  #wh-fp-hero .wh-fph__star {
    position: absolute;
    z-index: 1;
    top: 1%;
    right: 0;
    width: 65px;
    height: 65px;
    transform: rotate(15deg);
  }

  #wh-fp-hero .wh-fph__paper {
    position: absolute;
    width: 54%;
    aspect-ratio: 260 / 330;
    padding: 7px;
    background: #FFFFFF;
    border: 1px solid rgba(32,38,38,.07);
    border-radius: 4px;
    box-shadow: 0 12px 24px rgba(63,57,47,.13);
    transform-origin: center;
  }

  #wh-fp-hero .wh-fph__paper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #FFFCF7;
    border: 1px solid #F0EBE5;
  }

  #wh-fp-hero .wh-fph__paper--back {
    top: 7%;
    left: 3%;
    z-index: 2;
    transform: rotate(-18deg);
  }

  #wh-fp-hero .wh-fph__paper--middle {
    top: 17%;
    right: 3%;
    z-index: 3;
    transform: rotate(15deg);
  }

  #wh-fp-hero .wh-fph__paper--front {
    top: 10%;
    left: 23%;
    z-index: 4;
    transform: rotate(-3deg);
    box-shadow: 0 19px 34px rgba(63,57,47,.18);
  }

  #wh-fp-hero .wh-fph__paper--back svg,
  #wh-fp-hero .wh-fph__paper--middle svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  #wh-fp-hero .wh-fph__paper--front .wh-fph__paper-inner {
    display: flex;
    flex-direction: column;
  }

  #wh-fp-hero .wh-fph__paper-header,
  #wh-fp-hero .wh-fph__paper-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 9px 7px;
    color: #384947;
    font-family: "Inter", sans-serif;
    font-size: 5.5px;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.3;
  }

  #wh-fp-hero .wh-fph__paper-header span:last-child {
    color: #8B9290;
    text-align: right;
  }

  #wh-fp-hero .wh-fph__paper-art {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1;
  }

  #wh-fp-hero .wh-fph__paper-footer {
    padding-top: 3px;
    color: var(--fp-teal);
  }

  #wh-fp-hero .wh-fph__paper-footer svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }

  #wh-fp-hero .wh-fph__floating-label {
    position: absolute;
    z-index: 6;
    bottom: 8%;
    left: 1%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border-radius: 100px;
    background: #FFFFFF;
    color: var(--fp-ink);
    box-shadow: 0 9px 20px rgba(32,38,38,.1);
    transform: rotate(-6deg);
  }

  #wh-fp-hero .wh-fph__floating-label svg {
    width: 14px;
    height: 14px;
    color: var(--fp-teal);
  }

  #wh-fp-hero .wh-fph__floating-label span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    white-space: nowrap;
  }

  #wh-fp-hero .wh-fph__scribble {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 7%;
    width: 60px;
    transform: rotate(-12deg);
  }

  /* MOBILE — BOTTOM MICROCOPY */

  #wh-fp-hero .wh-fph__bottom {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 15px auto 0;
    color: #8C918F;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .11em;
    line-height: 1.5;
    text-align: center;
  }

  #wh-fp-hero .wh-fph__bottom-rule,
  #wh-fp-hero .wh-fph__bottom > span:last-child {
    display: none;
  }

}


/* ==========================================================
   03 — SMALL MOBILE | UP TO 375px
   ========================================================== */

@media (max-width: 375px) {

  #wh-fp-hero .wh-fph {
    padding-left: 18px;
    padding-right: 18px;
  }

  #wh-fp-hero .wh-fph__title {
    font-size: clamp(42px, 11.3vw, 48px);
  }

  #wh-fp-hero .wh-fph__eyebrow {
    font-size: 8px;
  }

  #wh-fp-hero .wh-fph__visual {
    height: 320px;
  }

  #wh-fp-hero .wh-fph__floating-label {
    padding: 9px 11px;
  }

  #wh-fp-hero .wh-fph__floating-label span {
    font-size: 7px;
  }

}


/* ==========================================================
   04 — REDUCED MOTION
   ========================================================== */

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {

  #wh-fp-hero .wh-fph__paper,
  #wh-fp-hero .wh-fph__cta,
  #wh-fp-hero .wh-fph__cta svg {
    transition: none;
  }

}






/* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 01 — RESPONSIVE PAPER REVEAL
   CSS ANIMATION v1.0
   Tablet + Mobile only
   Desktop untouched
   ========================================================== */


/* 01 — TABLET: STAGGERED PAPER ENTRANCE */

@media (min-width: 768px) and (max-width: 1024px)
       and (prefers-reduced-motion: no-preference) {

  #wh-fp-hero .wh-fph__paper--back {
    animation: whFpPaperBack 1s ease-out both;
    animation-delay: .12s;
  }

  #wh-fp-hero .wh-fph__paper--middle {
    animation: whFpPaperMiddle 1s ease-out both;
    animation-delay: .27s;
  }

  #wh-fp-hero .wh-fph__paper--front {
    animation: whFpPaperFront 1.1s
      cubic-bezier(.2,.75,.2,1) both;
    animation-delay: .42s;
  }

}


/* 02 — MOBILE: GENTLE REVEAL */

@media (max-width: 767px)
       and (prefers-reduced-motion: no-preference) {

  #wh-fp-hero .wh-fph__visual {
    animation: whFpMobileReveal 1.15s ease-out both;
    animation-delay: .2s;
  }

}


/* 03 — TABLET KEYFRAMES */

@keyframes whFpPaperBack {

  from {
    opacity: 0;
    transform: translate(-16px,22px) rotate(-24deg);
  }

  to {
    opacity: 1;
    transform: translate(0,0) rotate(-17deg);
  }

}

@keyframes whFpPaperMiddle {

  from {
    opacity: 0;
    transform: translate(18px,25px) rotate(22deg);
  }

  to {
    opacity: 1;
    transform: translate(0,0) rotate(15deg);
  }

}

@keyframes whFpPaperFront {

  from {
    opacity: 0;
    transform: translateY(28px) rotate(2deg) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(-3deg) scale(1);
  }

}


/* 04 — MOBILE KEYFRAMES */

@keyframes whFpMobileReveal {

  from {
    opacity: 0;
    transform: translateY(20px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

}


/* 05 — REDUCED MOTION SAFETY */

@media (max-width: 1024px)
       and (prefers-reduced-motion: reduce) {

  #wh-fp-hero .wh-fph__paper,
  #wh-fp-hero .wh-fph__visual {
    animation: none !important;
    opacity: 1;
  }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5f4152 *//* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 02 — FIND YOUR KIND OF CREATIVE

   CREATIVE SKETCH GALLERY
   CSS DESKTOP v1.0

   Scope: #wh-fp-creative
   Desktop: 1025px+
   ========================================================== */

@media (min-width: 1025px) {

  /* ========================================================
     01 — SECTION FOUNDATION
     ======================================================== */

  #wh-fp-creative {
    --fpc-bg: #F8F5EE;
    --fpc-ink: #202626;
    --fpc-muted: #626969;
    --fpc-teal: #198E88;
    --fpc-coral: #F17A68;
    --fpc-gold: #F3BE56;
    --fpc-line: rgba(32, 38, 38, .13);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpc-bg);
    color: var(--fpc-ink);
  }

  #wh-fp-creative,
  #wh-fp-creative * {
    box-sizing: border-box;
  }

  #wh-fp-creative .wh-fpc {
    position: relative;
    width: 100%;
    padding: clamp(105px, 10vw, 170px)
             clamp(40px, 6vw, 110px)
             clamp(105px, 9vw, 150px);
    font-family: "Inter", sans-serif;
  }

  #wh-fp-creative .wh-fpc__wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
  }


  /* ========================================================
     02 — BACKGROUND DECORATIONS
     ======================================================== */

  #wh-fp-creative .wh-fpc__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #wh-fp-creative .wh-fpc__decor-star {
    position: absolute;
    top: 9%;
    right: 7%;
    width: 92px;
    height: 92px;
    opacity: .72;
    transform: rotate(-13deg);
  }

  #wh-fp-creative .wh-fpc__decor-scribble {
    position: absolute;
    left: -20px;
    bottom: 13%;
    width: 145px;
    height: auto;
    opacity: .5;
    transform: rotate(-19deg);
  }

  #wh-fp-creative .wh-fpc__decor-circle {
    position: absolute;
    right: -270px;
    bottom: -300px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: rgba(101,184,175,.075);
  }


  /* ========================================================
     03 — SECTION HEADER
     ======================================================== */

  #wh-fp-creative .wh-fpc__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: clamp(75px, 8vw, 125px);
  }

  #wh-fp-creative .wh-fpc__intro {
    width: min(100%, 890px);
  }

  #wh-fp-creative .wh-fpc__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
    color: var(--fpc-teal);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: .2em;
  }

  #wh-fp-creative .wh-fpc__eyebrow-line {
    width: 33px;
    height: 2px;
    flex: 0 0 33px;
    background: currentColor;
  }

  #wh-fp-creative .wh-fpc__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 30px;
    padding: 0;
    color: var(--fpc-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(65px, 6.7vw, 112px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.065em;
  }

  #wh-fp-creative .wh-fpc__title span {
    color: var(--fpc-teal);
  }

  #wh-fp-creative .wh-fpc__description {
    max-width: 620px;
    margin: 0;
    color: var(--fpc-muted);
    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: -.01em;
  }


  /* ========================================================
     04 — EDITORIAL SIDE NOTE
     ======================================================== */

  #wh-fp-creative .wh-fpc__side-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex: 0 0 150px;
    padding-bottom: 20px;
    transform: rotate(7deg);
  }

  #wh-fp-creative .wh-fpc__side-note svg {
    width: 74px;
    height: 74px;
  }

  #wh-fp-creative .wh-fpc__side-note span {
    color: var(--fpc-teal);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.7;
    letter-spacing: .14em;
    text-align: center;
  }


  /* ========================================================
     05 — NAVIGATION HEADER
     ======================================================== */

  #wh-fp-creative .wh-fpc__nav {
    position: relative;
    width: 100%;
  }

  #wh-fp-creative .wh-fpc__filter-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 23px;
  }

  #wh-fp-creative .wh-fpc__filter-label {
    color: var(--fpc-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .19em;
  }

  #wh-fp-creative .wh-fpc__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 46px;
    padding: 12px 20px;
    border: 1px solid var(--fpc-line);
    border-radius: 100px;
    background: transparent;
    color: var(--fpc-ink);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: .02em;
    cursor: pointer;
    transition:
      background .3s ease,
      border-color .3s ease,
      color .3s ease,
      transform .3s ease;
  }

  #wh-fp-creative .wh-fpc__all svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
  }

  #wh-fp-creative .wh-fpc__all:hover {
    border-color: var(--fpc-teal);
    transform: translateY(-2px);
  }

  #wh-fp-creative .wh-fpc__all.is-active,
  #wh-fp-creative .wh-fpc__all[aria-pressed="true"] {
    border-color: var(--fpc-ink);
    background: var(--fpc-ink);
    color: #FFFFFF;
  }


  /* ========================================================
     06 — AGE INDEX
     ======================================================== */

  #wh-fp-creative .wh-fpc__list {
    width: 100%;
    border-top: 1px solid var(--fpc-line);
  }

  #wh-fp-creative .wh-fpc__item {
    position: relative;
    display: grid;
    grid-template-columns:
      65px
      minmax(0, 1.25fr)
      minmax(180px, .7fr)
      55px;
    align-items: center;
    column-gap: 25px;
    width: 100%;
    min-height: 152px;
    margin: 0;
    padding: 15px 27px 15px 18px;
    border: 0;
    border-bottom: 1px solid var(--fpc-line);
    border-radius: 0;
    background: transparent;
    color: var(--fpc-ink);
    font-family: "Inter", sans-serif;
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition:
      padding .45s cubic-bezier(.2,.75,.2,1),
      background .35s ease;
  }

  /* Hover background layer */

  #wh-fp-creative .wh-fpc__item::before {
    content: "";
    position: absolute;
    inset: 8px 0;
    z-index: -1;
    border-radius: 18px;
    background: color-mix(
      in srgb,
      var(--wh-fpc-accent) 11%,
      transparent
    );
    opacity: 0;
    transform: scaleY(.91);
    transition:
      opacity .35s ease,
      transform .45s cubic-bezier(.2,.75,.2,1);
  }

  #wh-fp-creative .wh-fpc__item:hover::before,
  #wh-fp-creative .wh-fpc__item:focus-visible::before {
    opacity: 1;
    transform: scaleY(1);
  }

  #wh-fp-creative .wh-fpc__item:hover {
    padding-left: 32px;
  }


  /* ========================================================
     07 — EDITORIAL NUMBERS
     ======================================================== */

  #wh-fp-creative .wh-fpc__number {
    align-self: center;
    color: #919695;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    transition: color .3s ease;
  }

  #wh-fp-creative .wh-fpc__item:hover .wh-fpc__number {
    color: var(--fpc-teal);
  }


  /* ========================================================
     08 — AGE & WORLD TYPOGRAPHY
     ======================================================== */

  #wh-fp-creative .wh-fpc__item-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    min-width: 0;
  }

  #wh-fp-creative .wh-fpc__age {
    color: var(--fpc-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(32px, 3.15vw, 52px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -.048em;
    transition: transform .35s ease;
  }

  #wh-fp-creative .wh-fpc__world {
    color: var(--fpc-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: .06em;
  }

  #wh-fp-creative .wh-fpc__item:hover .wh-fpc__age {
    transform: translateX(5px);
  }


  /* ========================================================
     09 — CREATIVE SKETCH ZONE
     ======================================================== */

  #wh-fp-creative .wh-fpc__sketch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 170px;
    height: 120px;
    isolation: isolate;
    pointer-events: none;
  }

  #wh-fp-creative .wh-fpc__sketch-blob {
    position: absolute;
    z-index: 0;
    width: 120px;
    height: 102px;
    border-radius: 48% 52% 63% 37% / 45% 42% 58% 55%;
    background: var(--wh-fpc-accent);
    opacity: .16;
    transform: rotate(-13deg) scale(.9);
    transition:
      opacity .45s ease,
      transform .55s cubic-bezier(.2,.75,.2,1);
  }

  #wh-fp-creative .wh-fpc__sketch-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 116px;
    height: 108px;
    overflow: visible;
    transform: rotate(-4deg) scale(.94);
    filter: drop-shadow(0 6px 5px rgba(32,38,38,.075));
    transition:
      transform .55s cubic-bezier(.2,.75,.2,1),
      filter .55s ease;
  }

  /* Sketch interaction */

  #wh-fp-creative .wh-fpc__item:hover
  .wh-fpc__sketch-blob {
    opacity: .26;
    transform: rotate(9deg) scale(1.12);
  }

  #wh-fp-creative .wh-fpc__item:hover
  .wh-fpc__sketch-art {
    transform: translateY(-9px) rotate(5deg) scale(1.08);
    filter: drop-shadow(0 13px 8px rgba(32,38,38,.13));
  }


  /* ========================================================
     10 — RIGHT ARROW
     ======================================================== */

  #wh-fp-creative .wh-fpc__item-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    justify-self: end;
  }

  #wh-fp-creative .wh-fpc__item-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wh-fpc-accent);
    opacity: .6;
    transition:
      opacity .3s ease,
      transform .3s ease;
  }

  #wh-fp-creative .wh-fpc__item-end svg {
    display: block;
    width: 27px;
    height: 27px;
    color: var(--fpc-ink);
    transition:
      transform .35s cubic-bezier(.2,.75,.2,1),
      color .3s ease;
  }

  #wh-fp-creative .wh-fpc__item:hover
  .wh-fpc__item-end svg {
    transform: translate(5px,-5px);
    color: var(--fpc-teal);
  }

  #wh-fp-creative .wh-fpc__item:hover
  .wh-fpc__item-dot {
    opacity: 1;
    transform: scale(1.5);
  }


  /* ========================================================
     11 — ACTIVE FILTER STATE
     Future JS will control aria-pressed
     ======================================================== */

  #wh-fp-creative .wh-fpc__item[aria-pressed="true"]::before {
    opacity: 1;
    transform: scaleY(1);
  }

  #wh-fp-creative .wh-fpc__item[aria-pressed="true"]
  .wh-fpc__sketch-blob {
    opacity: .28;
  }

  #wh-fp-creative .wh-fpc__item[aria-pressed="true"]
  .wh-fpc__number {
    color: var(--fpc-teal);
  }


  /* ========================================================
     12 — EDITORIAL FOOTNOTE
     ======================================================== */

  #wh-fp-creative .wh-fpc__footnote {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 43px;
  }

  #wh-fp-creative .wh-fpc__footnote-icon {
    color: var(--fpc-coral);
    font-size: 25px;
    line-height: 1;
  }

  #wh-fp-creative .wh-fpc__footnote p {
    margin: 0;
    color: var(--fpc-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
  }

  #wh-fp-creative .wh-fpc__footnote-line {
    flex: 1;
    height: 1px;
    background: var(--fpc-line);
  }

  #wh-fp-creative .wh-fpc__footnote-index {
    color: #878D89;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    white-space: nowrap;
  }


  /* ========================================================
     13 — KEYBOARD ACCESSIBILITY
     ======================================================== */

  #wh-fp-creative .wh-fpc__item:focus-visible,
  #wh-fp-creative .wh-fpc__all:focus-visible {
    outline: 3px solid var(--fpc-teal);
    outline-offset: -3px;
  }


  /* ========================================================
     14 — COMPACT DESKTOP 1025px–1199px
     ======================================================== */

  @media (max-width: 1199px) {

    #wh-fp-creative .wh-fpc {
      padding-left: 45px;
      padding-right: 45px;
    }

    #wh-fp-creative .wh-fpc__title {
      font-size: 72px;
    }

    #wh-fp-creative .wh-fpc__item {
      grid-template-columns:
        47px
        minmax(0, 1.2fr)
        minmax(130px, .65fr)
        45px;
      column-gap: 15px;
    }

    #wh-fp-creative .wh-fpc__age {
      font-size: 36px;
    }

    #wh-fp-creative .wh-fpc__sketch {
      width: 135px;
    }

  }


  /* ========================================================
     15 — REDUCED MOTION
     ======================================================== */

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

    #wh-fp-creative .wh-fpc__item,
    #wh-fp-creative .wh-fpc__item::before,
    #wh-fp-creative .wh-fpc__age,
    #wh-fp-creative .wh-fpc__sketch-blob,
    #wh-fp-creative .wh-fpc__sketch-art,
    #wh-fp-creative .wh-fpc__item-end svg,
    #wh-fp-creative .wh-fpc__item-dot,
    #wh-fp-creative .wh-fpc__all {
      transition: none;
    }

    #wh-fp-creative .wh-fpc__item:hover {
      padding-left: 18px;
    }

    #wh-fp-creative .wh-fpc__item:hover
    .wh-fpc__age {
      transform: none;
    }

    #wh-fp-creative .wh-fpc__item:hover
    .wh-fpc__sketch-art {
      transform: rotate(-4deg) scale(.94);
    }

    #wh-fp-creative .wh-fpc__item:hover
    .wh-fpc__sketch-blob {
      transform: rotate(-13deg) scale(.9);
    }

    #wh-fp-creative .wh-fpc__item:hover
    .wh-fpc__item-end svg,
    #wh-fp-creative .wh-fpc__item:hover
    .wh-fpc__item-dot {
      transform: none;
    }

  }

}











/* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 02 — FIND YOUR KIND OF CREATIVE

   CREATIVE SKETCH GALLERY
   CSS TABLET & MOBILE v1.0

   Scope: #wh-fp-creative
   Tablet: 768–1024px
   Mobile: up to 767px

   Desktop untouched.
   ========================================================== */


/* ==========================================================
   01 — TABLET | 768px–1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* SECTION FOUNDATION */

  #wh-fp-creative {
    --fpc-bg: #F8F5EE;
    --fpc-ink: #202626;
    --fpc-muted: #626969;
    --fpc-teal: #198E88;
    --fpc-coral: #F17A68;
    --fpc-gold: #F3BE56;
    --fpc-line: rgba(32,38,38,.13);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpc-bg);
    color: var(--fpc-ink);
  }

  #wh-fp-creative,
  #wh-fp-creative * {
    box-sizing: border-box;
  }

  #wh-fp-creative .wh-fpc {
    position: relative;
    width: 100%;
    padding: 100px 5vw 100px;
    font-family: "Inter", sans-serif;
  }

  #wh-fp-creative .wh-fpc__wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* BACKGROUND DECORATIONS */

  #wh-fp-creative .wh-fpc__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #wh-fp-creative .wh-fpc__decor-star {
    position: absolute;
    top: 7%;
    right: 6%;
    width: 65px;
    height: 65px;
    opacity: .6;
    transform: rotate(-13deg);
  }

  #wh-fp-creative .wh-fpc__decor-scribble {
    position: absolute;
    left: -35px;
    bottom: 12%;
    width: 115px;
    opacity: .35;
    transform: rotate(-19deg);
  }

  #wh-fp-creative .wh-fpc__decor-circle {
    position: absolute;
    right: -200px;
    bottom: -220px;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: rgba(101,184,175,.075);
  }

  /* SECTION HEADER */

  #wh-fp-creative .wh-fpc__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 65px;
  }

  #wh-fp-creative .wh-fpc__intro {
    flex: 1;
    min-width: 0;
  }

  #wh-fp-creative .wh-fpc__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: var(--fpc-teal);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .17em;
    line-height: 1.5;
  }

  #wh-fp-creative .wh-fpc__eyebrow-line {
    width: 27px;
    height: 2px;
    flex: 0 0 27px;
    background: currentColor;
  }

  #wh-fp-creative .wh-fpc__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 24px;
    padding: 0;
    color: var(--fpc-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(48px, 6.4vw, 72px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.06em;
  }

  #wh-fp-creative .wh-fpc__title span {
    color: var(--fpc-teal);
  }

  #wh-fp-creative .wh-fpc__description {
    max-width: 550px;
    margin: 0;
    color: var(--fpc-muted);
    font-size: 15px;
    line-height: 1.8;
  }

  /* EDITORIAL SIDE NOTE */

  #wh-fp-creative .wh-fpc__side-note {
    display: flex;
    flex: 0 0 115px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    transform: rotate(7deg);
  }

  #wh-fp-creative .wh-fpc__side-note svg {
    width: 55px;
    height: 55px;
  }

  #wh-fp-creative .wh-fpc__side-note span {
    color: var(--fpc-teal);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: .11em;
    text-align: center;
  }

  /* NAVIGATION HEADER */

  #wh-fp-creative .wh-fpc__nav {
    width: 100%;
  }

  #wh-fp-creative .wh-fpc__filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
  }

  #wh-fp-creative .wh-fpc__filter-label {
    color: var(--fpc-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
  }

  #wh-fp-creative .wh-fpc__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 44px;
    padding: 11px 17px;
    border: 1px solid var(--fpc-line);
    border-radius: 100px;
    background: transparent;
    color: var(--fpc-ink);
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
  }

  #wh-fp-creative .wh-fpc__all svg {
    width: 16px;
    height: 16px;
  }

  #wh-fp-creative .wh-fpc__all.is-active,
  #wh-fp-creative .wh-fpc__all[aria-pressed="true"] {
    background: var(--fpc-ink);
    border-color: var(--fpc-ink);
    color: #FFFFFF;
  }

  /* AGE INDEX */

  #wh-fp-creative .wh-fpc__list {
    width: 100%;
    border-top: 1px solid var(--fpc-line);
  }

  #wh-fp-creative .wh-fpc__item {
    position: relative;
    display: grid;
    grid-template-columns:
      45px
      minmax(0, 1.2fr)
      minmax(110px, .65fr)
      40px;
    align-items: center;
    column-gap: 14px;
    width: 100%;
    min-height: 132px;
    margin: 0;
    padding: 12px 12px;
    border: 0;
    border-bottom: 1px solid var(--fpc-line);
    border-radius: 0;
    background: transparent;
    color: var(--fpc-ink);
    font-family: "Inter", sans-serif;
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
  }

  #wh-fp-creative .wh-fpc__item::before {
    content: "";
    position: absolute;
    inset: 6px 0;
    z-index: -1;
    border-radius: 15px;
    background: var(--wh-fpc-accent);
    opacity: 0;
  }

  #wh-fp-creative .wh-fpc__item[aria-pressed="true"]::before {
    opacity: .11;
  }

  #wh-fp-creative .wh-fpc__number {
    color: #919695;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
  }

  #wh-fp-creative .wh-fpc__item-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
  }

  #wh-fp-creative .wh-fpc__age {
    color: var(--fpc-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(28px, 3.8vw, 39px);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.045em;
  }

  #wh-fp-creative .wh-fpc__world {
    color: var(--fpc-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: .035em;
  }

  /* TABLET — SVG SKETCHES */

  #wh-fp-creative .wh-fpc__sketch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 130px;
    height: 105px;
    isolation: isolate;
    pointer-events: none;
  }

  #wh-fp-creative .wh-fpc__sketch-blob {
    position: absolute;
    z-index: 0;
    width: 104px;
    height: 88px;
    border-radius: 48% 52% 63% 37% / 45% 42% 58% 55%;
    background: var(--wh-fpc-accent);
    opacity: .17;
    transform: rotate(-13deg);
  }

  #wh-fp-creative .wh-fpc__sketch-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 99px;
    height: 94px;
    overflow: visible;
    transform: rotate(-4deg);
    filter: drop-shadow(0 5px 4px rgba(32,38,38,.07));
  }

  /* TABLET — ARROW */

  #wh-fp-creative .wh-fpc__item-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    justify-self: end;
  }

  #wh-fp-creative .wh-fpc__item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wh-fpc-accent);
  }

  #wh-fp-creative .wh-fpc__item-end svg {
    width: 23px;
    height: 23px;
    color: var(--fpc-ink);
  }

  /* TABLET — FOOTNOTE */

  #wh-fp-creative .wh-fpc__footnote {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 35px;
  }

  #wh-fp-creative .wh-fpc__footnote-icon {
    color: var(--fpc-coral);
    font-size: 23px;
    line-height: 1;
  }

  #wh-fp-creative .wh-fpc__footnote p {
    margin: 0;
    color: var(--fpc-muted);
    font-size: 11px;
    line-height: 1.5;
  }

  #wh-fp-creative .wh-fpc__footnote-line {
    flex: 1;
    height: 1px;
    background: var(--fpc-line);
  }

  #wh-fp-creative .wh-fpc__footnote-index {
    color: #878D89;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    white-space: nowrap;
  }

}


/* ==========================================================
   02 — MOBILE | UP TO 767px
   ========================================================== */

@media (max-width: 767px) {

  /* SECTION FOUNDATION */

  #wh-fp-creative {
    --fpc-bg: #F8F5EE;
    --fpc-ink: #202626;
    --fpc-muted: #626969;
    --fpc-teal: #198E88;
    --fpc-coral: #F17A68;
    --fpc-gold: #F3BE56;
    --fpc-line: rgba(32,38,38,.13);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpc-bg);
    color: var(--fpc-ink);
  }

  #wh-fp-creative,
  #wh-fp-creative * {
    box-sizing: border-box;
  }

  #wh-fp-creative .wh-fpc {
    position: relative;
    width: 100%;
    padding: 78px 20px 85px;
    font-family: "Inter", sans-serif;
  }

  #wh-fp-creative .wh-fpc__wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
  }

  /* MOBILE — DECORATIONS */

  #wh-fp-creative .wh-fpc__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #wh-fp-creative .wh-fpc__decor-star {
    position: absolute;
    top: 3%;
    right: 5%;
    width: 42px;
    height: 42px;
    opacity: .43;
    transform: rotate(-13deg);
  }

  #wh-fp-creative .wh-fpc__decor-scribble {
    display: none;
  }

  #wh-fp-creative .wh-fpc__decor-circle {
    position: absolute;
    right: -160px;
    bottom: -160px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(101,184,175,.07);
  }

  /* MOBILE — HEADER */

  #wh-fp-creative .wh-fpc__header {
    display: block;
    margin-bottom: 45px;
  }

  #wh-fp-creative .wh-fpc__intro {
    width: 100%;
  }

  #wh-fp-creative .wh-fpc__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--fpc-teal);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .13em;
    line-height: 1.5;
  }

  #wh-fp-creative .wh-fpc__eyebrow-line {
    width: 23px;
    height: 2px;
    flex: 0 0 23px;
    background: currentColor;
  }

  #wh-fp-creative .wh-fpc__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 22px;
    padding: 0;
    color: var(--fpc-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(42px, 10vw, 68px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.06em;
  }

  #wh-fp-creative .wh-fpc__title span {
    color: var(--fpc-teal);
  }

  #wh-fp-creative .wh-fpc__description {
    max-width: 450px;
    margin: 0;
    color: var(--fpc-muted);
    font-size: 14px;
    line-height: 1.75;
  }

  #wh-fp-creative .wh-fpc__side-note {
    display: none;
  }

  /* MOBILE — FILTER TOP */

  #wh-fp-creative .wh-fpc__nav {
    width: 100%;
  }

  #wh-fp-creative .wh-fpc__filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
  }

  #wh-fp-creative .wh-fpc__filter-label {
    color: var(--fpc-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  #wh-fp-creative .wh-fpc__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 10px 14px;
    border: 1px solid var(--fpc-line);
    border-radius: 100px;
    background: transparent;
    color: var(--fpc-ink);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
  }

  #wh-fp-creative .wh-fpc__all svg {
    width: 15px;
    height: 15px;
  }

  #wh-fp-creative .wh-fpc__all.is-active,
  #wh-fp-creative .wh-fpc__all[aria-pressed="true"] {
    background: var(--fpc-ink);
    border-color: var(--fpc-ink);
    color: #FFFFFF;
  }

  /* MOBILE — CREATIVE AGE INDEX */

  #wh-fp-creative .wh-fpc__list {
    width: 100%;
    border-top: 1px solid var(--fpc-line);
  }

  #wh-fp-creative .wh-fpc__item {
    position: relative;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      79px
      24px;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    min-height: 122px;
    margin: 0;
    padding: 15px 3px;
    border: 0;
    border-bottom: 1px solid var(--fpc-line);
    border-radius: 0;
    background: transparent;
    color: var(--fpc-ink);
    font-family: "Inter", sans-serif;
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
  }

  #wh-fp-creative .wh-fpc__item::before {
    content: "";
    position: absolute;
    inset: 6px -5px;
    z-index: -1;
    border-radius: 12px;
    background: var(--wh-fpc-accent);
    opacity: 0;
  }

  #wh-fp-creative .wh-fpc__item[aria-pressed="true"]::before {
    opacity: .12;
  }

  /* Small editorial number above the age */

  #wh-fp-creative .wh-fpc__number {
    position: absolute;
    top: 16px;
    left: 3px;
    color: #929795;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  /* Age + world */

  #wh-fp-creative .wh-fpc__item-main {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding-top: 16px;
  }

  #wh-fp-creative .wh-fpc__age {
    color: var(--fpc-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(25px, 7.3vw, 38px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -.05em;
  }

  #wh-fp-creative .wh-fpc__world {
    color: var(--fpc-muted);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: .025em;
  }

  /* MOBILE — SVG SKETCHES */

  #wh-fp-creative .wh-fpc__sketch {
    position: relative;
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 79px;
    height: 84px;
    isolation: isolate;
    pointer-events: none;
  }

  #wh-fp-creative .wh-fpc__sketch-blob {
    position: absolute;
    z-index: 0;
    width: 73px;
    height: 68px;
    border-radius: 48% 52% 63% 37% / 45% 42% 58% 55%;
    background: var(--wh-fpc-accent);
    opacity: .17;
    transform: rotate(-13deg);
  }

  #wh-fp-creative .wh-fpc__sketch-art {
    position: relative;
    z-index: 1;
    display: block;
    width: 77px;
    height: 76px;
    overflow: visible;
    transform: rotate(-4deg);
    filter: drop-shadow(0 4px 3px rgba(32,38,38,.07));
  }

  /* MOBILE — ARROW */

  #wh-fp-creative .wh-fpc__item-end {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
  }

  #wh-fp-creative .wh-fpc__item-dot {
    display: none;
  }

  #wh-fp-creative .wh-fpc__item-end svg {
    display: block;
    width: 21px;
    height: 21px;
    color: var(--fpc-ink);
  }

  /* MOBILE — FOOTNOTE */

  #wh-fp-creative .wh-fpc__footnote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 32px;
  }

  #wh-fp-creative .wh-fpc__footnote-icon {
    color: var(--fpc-coral);
    font-size: 22px;
    line-height: 1;
  }

  #wh-fp-creative .wh-fpc__footnote p {
    margin: 0;
    color: var(--fpc-muted);
    font-size: 11px;
    line-height: 1.6;
  }

  #wh-fp-creative .wh-fpc__footnote-line,
  #wh-fp-creative .wh-fpc__footnote-index {
    display: none;
  }

}


/* ==========================================================
   03 — SMALL MOBILE | UP TO 375px
   ========================================================== */

@media (max-width: 375px) {

  #wh-fp-creative .wh-fpc {
    padding-left: 16px;
    padding-right: 16px;
  }

  #wh-fp-creative .wh-fpc__title {
    font-size: clamp(39px, 10vw, 43px);
  }

  #wh-fp-creative .wh-fpc__item {
    grid-template-columns:
      minmax(0, 1fr)
      68px
      20px;
    column-gap: 6px;
    min-height: 112px;
  }

  #wh-fp-creative .wh-fpc__age {
    font-size: clamp(23px, 7vw, 27px);
  }

  #wh-fp-creative .wh-fpc__world {
    font-size: 9px;
  }

  #wh-fp-creative .wh-fpc__sketch {
    width: 68px;
    height: 75px;
  }

  #wh-fp-creative .wh-fpc__sketch-blob {
    width: 62px;
    height: 61px;
  }

  #wh-fp-creative .wh-fpc__sketch-art {
    width: 67px;
    height: 68px;
  }

  #wh-fp-creative .wh-fpc__item-end svg {
    width: 19px;
    height: 19px;
  }

}


/* ==========================================================
   04 — RESPONSIVE FOCUS / TAP FEEDBACK
   ========================================================== */

@media (max-width: 1024px) {

  #wh-fp-creative .wh-fpc__item:focus-visible,
  #wh-fp-creative .wh-fpc__all:focus-visible {
    outline: 3px solid #198E88;
    outline-offset: -3px;
  }

  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__sketch-art {
    transform: rotate(0deg) scale(.97);
  }

  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__sketch-blob {
    opacity: .25;
  }

}


/* ==========================================================
   05 — ACCESSIBILITY: REDUCED MOTION
   ========================================================== */

@media (max-width: 1024px)
       and (prefers-reduced-motion: reduce) {

  #wh-fp-creative .wh-fpc__item,
  #wh-fp-creative .wh-fpc__sketch-art,
  #wh-fp-creative .wh-fpc__sketch-blob,
  #wh-fp-creative .wh-fpc__all {
    animation: none !important;
    transition: none !important;
  }

}




/* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 02 — TOUCH INTERACTION v1.0
   TABLET + MOBILE
   Desktop remains untouched
   ========================================================== */


/* 01 — TOUCH ANIMATION FOUNDATION */

@media (max-width: 1024px) and (hover: none) {

  #wh-fp-creative .wh-fpc__item {
    transition:
      background-color .3s ease,
      transform .3s ease;
    touch-action: manipulation;
  }

  #wh-fp-creative .wh-fpc__sketch-art {
    transition:
      transform .38s cubic-bezier(.2,.75,.2,1),
      filter .38s ease;
  }

  #wh-fp-creative .wh-fpc__sketch-blob {
    transition:
      opacity .35s ease,
      transform .38s cubic-bezier(.2,.75,.2,1);
  }

  #wh-fp-creative .wh-fpc__item-end svg {
    transition:
      transform .3s ease,
      color .3s ease;
  }


  /* 02 — TOUCH / PRESS RESPONSE */

  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__sketch-art {
    transform:
      translateY(-9px)
      rotate(6deg)
      scale(1.09);
    filter:
      drop-shadow(0 10px 7px rgba(32,38,38,.14));
  }

  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__sketch-blob {
    opacity: .32;
    transform: rotate(11deg) scale(1.14);
  }

  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__item-end svg {
    transform: translate(4px,-4px);
    color: #198E88;
  }

  #wh-fp-creative .wh-fpc__item:active::before {
    opacity: .12;
  }

}


/* 03 — ACCESSIBILITY */

@media (max-width: 1024px)
       and (prefers-reduced-motion: reduce) {

  #wh-fp-creative .wh-fpc__item,
  #wh-fp-creative .wh-fpc__sketch-art,
  #wh-fp-creative .wh-fpc__sketch-blob,
  #wh-fp-creative .wh-fpc__item-end svg {
    transition: none !important;
  }

  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__sketch-art,
  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__sketch-blob,
  #wh-fp-creative .wh-fpc__item:active
  .wh-fpc__item-end svg {
    transform: none;
  }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae37d66 *//* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 03 — THE FREE PRINTABLES GALLERY

   THE CREATIVE PAPER LIBRARY
   CSS DESKTOP v1.0

   Scope: #wh-fp-gallery
   Desktop: 1025px+
   ========================================================== */

@media (min-width: 1025px) {

  /* ========================================================
     01 — SECTION FOUNDATION
     ======================================================== */

  #wh-fp-gallery {
    --fpg-white: #FFFCF8;
    --fpg-paper: #FFFFFF;
    --fpg-ink: #202626;
    --fpg-muted: #626969;
    --fpg-teal: #198E88;
    --fpg-coral: #F17A68;
    --fpg-gold: #F3BE56;
    --fpg-line: rgba(32, 38, 38, .12);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpg-white);
    color: var(--fpg-ink);
  }

  #wh-fp-gallery,
  #wh-fp-gallery * {
    box-sizing: border-box;
  }

  #wh-fp-gallery .wh-fpg {
    position: relative;
    width: 100%;
    padding:
      clamp(110px, 10vw, 170px)
      clamp(40px, 6vw, 110px)
      clamp(110px, 10vw, 170px);
    font-family: "Inter", sans-serif;
  }

  #wh-fp-gallery .wh-fpg__wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
  }

  #wh-fp-gallery .wh-fpg__svg-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }


  /* ========================================================
     02 — AMBIENT BACKGROUND
     ======================================================== */

  #wh-fp-gallery .wh-fpg__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #wh-fp-gallery .wh-fpg__decor-orb {
    position: absolute;
    top: -230px;
    right: -240px;
    width: 610px;
    height: 610px;
    border-radius: 50%;
    background: rgba(243, 190, 86, .075);
  }

  #wh-fp-gallery .wh-fpg__decor-dot {
    position: absolute;
    left: 4.5%;
    top: 39%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--fpg-coral);
    opacity: .35;
  }


  /* ========================================================
     03 — EDITORIAL HEADER
     ======================================================== */

  #wh-fp-gallery .wh-fpg__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: clamp(65px, 7vw, 100px);
  }

  #wh-fp-gallery .wh-fpg__intro {
    width: min(100%, 900px);
  }

  #wh-fp-gallery .wh-fpg__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
    color: var(--fpg-teal);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .19em;
  }

  #wh-fp-gallery .wh-fpg__eyebrow-line {
    width: 32px;
    height: 2px;
    flex: 0 0 32px;
    background: currentColor;
  }

  #wh-fp-gallery .wh-fpg__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 27px;
    padding: 0;
    color: var(--fpg-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(65px, 6.5vw, 108px);
    font-weight: 800;
    line-height: 1.035;
    letter-spacing: -.065em;
  }

  #wh-fp-gallery .wh-fpg__title span {
    color: var(--fpg-coral);
  }

  #wh-fp-gallery .wh-fpg__description {
    max-width: 630px;
    margin: 0;
    color: var(--fpg-muted);
    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: -.01em;
  }


  /* ========================================================
     04 — EDITORIAL HEADER MARK
     ======================================================== */

  #wh-fp-gallery .wh-fpg__header-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 172px;
    width: 172px;
    height: 172px;
    margin-bottom: 12px;
    border: 1.5px solid rgba(25,142,136,.4);
    border-radius: 50%;
    background: rgba(101,184,175,.06);
    color: var(--fpg-teal);
    text-align: center;
    transform: rotate(12deg);
  }

  #wh-fp-gallery .wh-fpg__header-mark span {
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .15em;
  }

  #wh-fp-gallery .wh-fpg__header-mark strong {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 39px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.06em;
  }


  /* ========================================================
     05 — GALLERY STATUS BAR
     ======================================================== */

  #wh-fp-gallery .wh-fpg__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    width: 100%;
    margin-bottom: 33px;
    padding: 18px 0;
    border-top: 1px solid var(--fpg-line);
    border-bottom: 1px solid var(--fpg-line);
  }

  #wh-fp-gallery .wh-fpg__results {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
  }

  #wh-fp-gallery .wh-fpg__results-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--fpg-teal);
  }

  #wh-fp-gallery .wh-fpg__results-text {
    color: var(--fpg-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .025em;
  }

  #wh-fp-gallery .wh-fpg__toolbar-note {
    color: #8C918F;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .14em;
    text-align: right;
  }


  /* ========================================================
     06 — GALLERY GRID
     ======================================================== */

  #wh-fp-gallery .wh-fpg__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(23px, 2.7vw, 43px);
    row-gap: clamp(55px, 5.2vw, 90px);
    width: 100%;
  }


  /* ========================================================
     07 — EDITORIAL CARD FOUNDATION
     ======================================================== */

  #wh-fp-gallery .wh-fpg__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--fpg-ink);
  }

  /* Subtle editorial variation */

  #wh-fp-gallery .wh-fpg__card:nth-child(3n+2) {
    margin-top: 32px;
  }

  #wh-fp-gallery .wh-fpg__card:nth-child(3n+3) {
    margin-top: 13px;
  }


  /* ========================================================
     08 — CARD MEDIA / COLORED STAGE
     ======================================================== */

  #wh-fp-gallery .wh-fpg__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1.15;
    padding: clamp(22px, 3vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(32,38,38,.035);
    border-radius: 17px;
    background:
      color-mix(
        in srgb,
        var(--fpg-card-accent) 13%,
        #FFF9F0
      );
    isolation: isolate;
    transition:
      background .45s ease,
      border-radius .45s ease;
  }

  /* Decorative offset circle */

  #wh-fp-gallery .wh-fpg__media::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 70%;
    aspect-ratio: 1;
    top: 8%;
    right: -16%;
    border-radius: 50%;
    background: var(--fpg-card-accent);
    opacity: .105;
    transform: scale(.94);
    transition:
      transform .55s ease,
      opacity .55s ease;
  }

  /* Tiny editorial stroke */

  #wh-fp-gallery .wh-fpg__media::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 10%;
    bottom: 10%;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background: var(--fpg-card-accent);
    opacity: .65;
    transform: rotate(-28deg);
  }


  /* ========================================================
     09 — PHYSICAL PAPER SHEET
     ======================================================== */

  #wh-fp-gallery .wh-fpg__sheet {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(80%, 315px);
    aspect-ratio: 3 / 4;
    padding: 13px;
    border: 1px solid rgba(32,38,38,.095);
    border-radius: 3px;
    background: var(--fpg-paper);
    box-shadow:
      0 22px 34px rgba(47,50,46,.135),
      0 6px 11px rgba(47,50,46,.07);
    transform: rotate(-3deg) translateY(0);
    transform-origin: center center;
    transition:
      transform .65s cubic-bezier(.2,.75,.2,1),
      box-shadow .65s ease;
  }

  /* Rotate sheets differently for editorial rhythm */

  #wh-fp-gallery .wh-fpg__card:nth-child(3n+2)
  .wh-fpg__sheet {
    transform: rotate(3deg);
  }

  #wh-fp-gallery .wh-fpg__card:nth-child(3n+3)
  .wh-fpg__sheet {
    transform: rotate(-1.5deg);
  }

  /* Inner paper border */

  #wh-fp-gallery .wh-fpg__sheet::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid #F0EDE8;
    pointer-events: none;
  }


  /* ========================================================
     10 — SHEET CONTENT
     ======================================================== */

  #wh-fp-gallery .wh-fpg__sheet-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 8px 0;
    color: #667370;
    font-size: clamp(7px, .7vw, 10px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .09em;
  }

  #wh-fp-gallery .wh-fpg__sheet-top span:last-child {
    color: #9CA5A1;
  }

  #wh-fp-gallery .wh-fpg__sheet > svg {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1;
    margin: 5px auto;
    overflow: visible;
  }

  #wh-fp-gallery .wh-fpg__sheet-bottom {
    position: relative;
    z-index: 2;
    display: block;
    padding: 0 8px 6px;
    color: #8B9590;
    font-size: clamp(7px, .65vw, 9px);
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: .13em;
    text-align: center;
  }


  /* ========================================================
     11 — CONCEPT PREVIEW LABEL
     ======================================================== */

  #wh-fp-gallery .wh-fpg__preview-badge {
    position: absolute;
    z-index: 4;
    left: 17px;
    top: 17px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 7px 11px;
    border-radius: 100px;
    background: rgba(255,255,255,.95);
    color: #626969;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .075em;
    box-shadow: 0 4px 12px rgba(32,38,38,.06);
  }


  /* ========================================================
     12 — CARD BODY
     ======================================================== */

  #wh-fp-gallery .wh-fpg__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 25px 4px 0;
  }

  #wh-fp-gallery .wh-fpg__age-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: 13px;
    color: var(--fpg-teal);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .14em;
  }

  #wh-fp-gallery .wh-fpg__card-body h3 {
    margin: 0 0 11px;
    padding: 0;
    color: var(--fpg-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(25px, 2.15vw, 34px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.045em;
  }

  #wh-fp-gallery .wh-fpg__card-body p {
    max-width: 345px;
    margin: 0 0 18px;
    color: var(--fpg-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
  }

  #wh-fp-gallery .wh-fpg__unavailable {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(32,38,38,.13);
    border-radius: 100px;
    background: rgba(255,255,255,.65);
    color: #777F7B;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: .025em;
  }

  #wh-fp-gallery .wh-fpg__unavailable::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #A8B2AC;
  }


  /* ========================================================
     13 — HOVER: PAPER LIFT
     ======================================================== */

  #wh-fp-gallery .wh-fpg__card:hover .wh-fpg__media {
    border-radius: 22px;
    background:
      color-mix(
        in srgb,
        var(--fpg-card-accent) 19%,
        #FFF9F0
      );
  }

  #wh-fp-gallery .wh-fpg__card:hover
  .wh-fpg__media::before {
    opacity: .18;
    transform: scale(1.12);
  }

  #wh-fp-gallery .wh-fpg__card:hover
  .wh-fpg__sheet {
    transform:
      translateY(-15px)
      rotate(0deg)
      scale(1.035);
    box-shadow:
      0 32px 48px rgba(47,50,46,.18),
      0 9px 15px rgba(47,50,46,.08);
  }

  #wh-fp-gallery .wh-fpg__card:hover
  .wh-fpg__card-body h3 {
    color: var(--fpg-teal);
  }

  #wh-fp-gallery .wh-fpg__card-body h3 {
    transition: color .3s ease;
  }


  /* ========================================================
     14 — EMPTY FILTER STATE
     ======================================================== */

  #wh-fp-gallery .wh-fpg__empty {
    width: 100%;
    margin-top: 35px;
    padding: 85px 40px;
    border: 1px solid var(--fpg-line);
    border-radius: 24px;
    background: #F8F5EE;
    text-align: center;
  }

  #wh-fp-gallery .wh-fpg__empty[hidden] {
    display: none !important;
  }

  #wh-fp-gallery .wh-fpg__empty-symbol {
    display: block;
    margin-bottom: 18px;
    color: var(--fpg-coral);
    font-size: 42px;
    line-height: 1;
  }

  #wh-fp-gallery .wh-fpg__empty h3 {
    margin: 0 0 15px;
    color: var(--fpg-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.045em;
  }

  #wh-fp-gallery .wh-fpg__empty p {
    max-width: 530px;
    margin: 0 auto;
    color: var(--fpg-muted);
    font-size: 15px;
    line-height: 1.8;
  }


  /* ========================================================
     15 — GALLERY CLOSING NOTE
     ======================================================== */

  #wh-fp-gallery .wh-fpg__closing {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: clamp(70px, 7vw, 110px);
    padding-top: 24px;
    border-top: 1px solid var(--fpg-line);
  }

  #wh-fp-gallery .wh-fpg__closing-symbol {
    color: var(--fpg-coral);
    font-size: 26px;
    line-height: 1;
  }

  #wh-fp-gallery .wh-fpg__closing p {
    margin: 0;
    color: var(--fpg-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
  }

  #wh-fp-gallery .wh-fpg__closing-line {
    flex: 1;
    height: 1px;
    background: var(--fpg-line);
  }

  #wh-fp-gallery .wh-fpg__closing-label {
    color: #878D89;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .13em;
    white-space: nowrap;
  }


  /* ========================================================
     16 — COMPACT DESKTOP | 1025–1199px
     ======================================================== */

  @media (max-width: 1199px) {

    #wh-fp-gallery .wh-fpg {
      padding-left: 45px;
      padding-right: 45px;
    }

    #wh-fp-gallery .wh-fpg__title {
      font-size: 73px;
    }

    #wh-fp-gallery .wh-fpg__header-mark {
      width: 135px;
      height: 135px;
      flex-basis: 135px;
    }

    #wh-fp-gallery .wh-fpg__header-mark strong {
      font-size: 31px;
    }

    #wh-fp-gallery .wh-fpg__grid {
      column-gap: 22px;
      row-gap: 55px;
    }

    #wh-fp-gallery .wh-fpg__media {
      padding: 20px;
    }

    #wh-fp-gallery .wh-fpg__sheet {
      width: 84%;
      padding: 9px;
    }

    #wh-fp-gallery .wh-fpg__card-body h3 {
      font-size: 26px;
    }

  }


  /* ========================================================
     17 — REDUCED MOTION
     ======================================================== */

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

    #wh-fp-gallery .wh-fpg__media,
    #wh-fp-gallery .wh-fpg__media::before,
    #wh-fp-gallery .wh-fpg__sheet,
    #wh-fp-gallery .wh-fpg__card-body h3 {
      transition: none !important;
    }

    #wh-fp-gallery .wh-fpg__card:hover
    .wh-fpg__sheet {
      transform: none;
    }

  }

}







/* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 03 — THE CREATIVE PAPER LIBRARY

   CSS TABLET & MOBILE v1.0
   Tablet: 768–1024px
   Mobile: 0–767px

   Includes:
   - Responsive paper gallery
   - Touch paper lift
   - Scroll reveal preparation
   - Reduced motion accessibility

   Desktop remains untouched.
   ========================================================== */


/* ==========================================================
   01 — SHARED RESPONSIVE FOUNDATION
   ========================================================== */

@media (max-width: 1024px) {

  #wh-fp-gallery {
    --fpg-white: #FFFCF8;
    --fpg-paper: #FFFFFF;
    --fpg-ink: #202626;
    --fpg-muted: #626969;
    --fpg-teal: #198E88;
    --fpg-coral: #F17A68;
    --fpg-gold: #F3BE56;
    --fpg-line: rgba(32,38,38,.12);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpg-white);
    color: var(--fpg-ink);
  }

  #wh-fp-gallery,
  #wh-fp-gallery * {
    box-sizing: border-box;
  }

  #wh-fp-gallery .wh-fpg {
    position: relative;
    width: 100%;
    font-family: "Inter", sans-serif;
  }

  #wh-fp-gallery .wh-fpg__wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
  }

  #wh-fp-gallery .wh-fpg__svg-library {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }


  /* BACKGROUND DECORATIONS */

  #wh-fp-gallery .wh-fpg__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #wh-fp-gallery .wh-fpg__decor-orb {
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(243,190,86,.07);
  }

  #wh-fp-gallery .wh-fpg__decor-dot {
    position: absolute;
    left: 4%;
    top: 38%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fpg-coral);
    opacity: .35;
  }


  /* EYEBROW */

  #wh-fp-gallery .wh-fpg__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--fpg-teal);
    font-weight: 800;
    line-height: 1.5;
  }

  #wh-fp-gallery .wh-fpg__eyebrow-line {
    width: 27px;
    height: 2px;
    flex: 0 0 27px;
    background: currentColor;
  }


  /* TITLE */

  #wh-fp-gallery .wh-fpg__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    color: var(--fpg-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.06em;
  }

  #wh-fp-gallery .wh-fpg__title span {
    color: var(--fpg-coral);
  }

  #wh-fp-gallery .wh-fpg__description {
    margin: 0;
    color: var(--fpg-muted);
    font-weight: 400;
    line-height: 1.8;
  }


  /* TOOLBAR */

  #wh-fp-gallery .wh-fpg__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    border-top: 1px solid var(--fpg-line);
    border-bottom: 1px solid var(--fpg-line);
  }

  #wh-fp-gallery .wh-fpg__results {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }

  #wh-fp-gallery .wh-fpg__results-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--fpg-teal);
  }

  #wh-fp-gallery .wh-fpg__results-text {
    color: var(--fpg-ink);
    font-weight: 700;
    line-height: 1.5;
  }

  #wh-fp-gallery .wh-fpg__toolbar-note {
    color: #8C918F;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .1em;
    text-align: right;
  }


  /* CARD FOUNDATION */

  #wh-fp-gallery .wh-fpg__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--fpg-ink);
  }

  #wh-fp-gallery .wh-fpg__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    border: 1px solid rgba(32,38,38,.04);
    border-radius: 17px;
    background: color-mix(
      in srgb,
      var(--fpg-card-accent) 13%,
      #FFF9F0
    );
    isolation: isolate;
  }

  #wh-fp-gallery .wh-fpg__media::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 73%;
    aspect-ratio: 1;
    top: 7%;
    right: -17%;
    border-radius: 50%;
    background: var(--fpg-card-accent);
    opacity: .1;
  }

  #wh-fp-gallery .wh-fpg__media::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 10%;
    bottom: 10%;
    width: 35px;
    height: 3px;
    border-radius: 3px;
    background: var(--fpg-card-accent);
    opacity: .6;
    transform: rotate(-28deg);
  }


  /* PHYSICAL PAPER */

  #wh-fp-gallery .wh-fpg__sheet {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(80%, 330px);
    aspect-ratio: 3 / 4;
    border: 1px solid rgba(32,38,38,.095);
    border-radius: 3px;
    background: var(--fpg-paper);
    box-shadow:
      0 18px 30px rgba(47,50,46,.13),
      0 5px 10px rgba(47,50,46,.06);
    transform: rotate(-3deg);
    transform-origin: center;
    backface-visibility: hidden;
  }

  #wh-fp-gallery .wh-fpg__sheet::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid #F0EDE8;
    pointer-events: none;
  }

  #wh-fp-gallery .wh-fpg__card:nth-child(even)
  .wh-fpg__sheet {
    transform: rotate(3deg);
  }


  /* PAPER CONTENT */

  #wh-fp-gallery .wh-fpg__sheet-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    color: #667370;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .065em;
  }

  #wh-fp-gallery .wh-fpg__sheet-top span:last-child {
    color: #9CA5A1;
  }

  #wh-fp-gallery .wh-fpg__sheet > svg {
    display: block;
    width: 100%;
    min-height: 0;
    flex: 1;
    margin: 5px auto;
    overflow: visible;
  }

  #wh-fp-gallery .wh-fpg__sheet-bottom {
    position: relative;
    z-index: 2;
    display: block;
    color: #8B9590;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: .1em;
    text-align: center;
  }


  /* CONCEPT LABEL */

  #wh-fp-gallery .wh-fpg__preview-badge {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    border-radius: 100px;
    background: rgba(255,255,255,.95);
    color: #626969;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .075em;
    box-shadow: 0 4px 12px rgba(32,38,38,.06);
  }


  /* CARD TYPOGRAPHY */

  #wh-fp-gallery .wh-fpg__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  #wh-fp-gallery .wh-fpg__age-label {
    color: var(--fpg-teal);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .13em;
  }

  #wh-fp-gallery .wh-fpg__card-body h3 {
    margin: 0;
    padding: 0;
    color: var(--fpg-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.045em;
  }

  #wh-fp-gallery .wh-fpg__card-body p {
    margin: 0;
    color: var(--fpg-muted);
    font-weight: 400;
    line-height: 1.7;
  }

  #wh-fp-gallery .wh-fpg__unavailable {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(32,38,38,.13);
    border-radius: 100px;
    background: rgba(255,255,255,.65);
    color: #777F7B;
    font-weight: 750;
    line-height: 1.3;
  }

  #wh-fp-gallery .wh-fpg__unavailable::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #A8B2AC;
  }


  /* EMPTY STATE */

  #wh-fp-gallery .wh-fpg__empty {
    width: 100%;
    border: 1px solid var(--fpg-line);
    border-radius: 20px;
    background: #F8F5EE;
    text-align: center;
  }

  #wh-fp-gallery .wh-fpg__empty[hidden] {
    display: none !important;
  }

  #wh-fp-gallery .wh-fpg__empty-symbol {
    display: block;
    color: var(--fpg-coral);
    line-height: 1;
  }

  #wh-fp-gallery .wh-fpg__empty h3 {
    margin: 0;
    color: var(--fpg-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.045em;
  }

  #wh-fp-gallery .wh-fpg__empty p {
    max-width: 510px;
    margin: 0 auto;
    color: var(--fpg-muted);
    line-height: 1.75;
  }


  /* CLOSING NOTE */

  #wh-fp-gallery .wh-fpg__closing {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--fpg-line);
  }

  #wh-fp-gallery .wh-fpg__closing-symbol {
    color: var(--fpg-coral);
    line-height: 1;
  }

  #wh-fp-gallery .wh-fpg__closing p {
    margin: 0;
    color: var(--fpg-muted);
    line-height: 1.6;
  }

  #wh-fp-gallery .wh-fpg__closing-line {
    flex: 1;
    height: 1px;
    background: var(--fpg-line);
  }

  #wh-fp-gallery .wh-fpg__closing-label {
    color: #878D89;
    font-weight: 800;
    letter-spacing: .1em;
    white-space: nowrap;
  }

}


/* ==========================================================
   02 — TABLET | 768–1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  #wh-fp-gallery .wh-fpg {
    padding: 105px 5vw 115px;
  }

  #wh-fp-gallery .wh-fpg__wrap {
    max-width: 960px;
  }

  /* HEADER */

  #wh-fp-gallery .wh-fpg__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 65px;
  }

  #wh-fp-gallery .wh-fpg__intro {
    flex: 1;
    min-width: 0;
  }

  #wh-fp-gallery .wh-fpg__eyebrow {
    margin-bottom: 24px;
    font-size: 10px;
    letter-spacing: .15em;
  }

  #wh-fp-gallery .wh-fpg__title {
    margin-bottom: 25px;
    font-size: clamp(49px, 6.5vw, 76px);
  }

  #wh-fp-gallery .wh-fpg__description {
    max-width: 525px;
    font-size: 15px;
  }

  /* PAPER LIBRARY SEAL */

  #wh-fp-gallery .wh-fpg__header-mark {
    display: flex;
    flex: 0 0 116px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 116px;
    height: 116px;
    margin-bottom: 10px;
    border: 1.5px solid rgba(25,142,136,.4);
    border-radius: 50%;
    background: rgba(101,184,175,.06);
    color: var(--fpg-teal);
    text-align: center;
    transform: rotate(12deg);
  }

  #wh-fp-gallery .wh-fpg__header-mark span {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  #wh-fp-gallery .wh-fpg__header-mark strong {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
  }

  /* TOOLBAR */

  #wh-fp-gallery .wh-fpg__toolbar {
    padding: 17px 0;
    margin-bottom: 30px;
  }

  #wh-fp-gallery .wh-fpg__results-text {
    font-size: 12px;
  }

  #wh-fp-gallery .wh-fpg__toolbar-note {
    font-size: 9px;
  }

  /* TWO-COLUMN GALLERY */

  #wh-fp-gallery .wh-fpg__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(20px, 3vw, 35px);
    row-gap: 58px;
    width: 100%;
  }

  #wh-fp-gallery .wh-fpg__card:nth-child(even) {
    margin-top: 24px;
  }

  #wh-fp-gallery .wh-fpg__media {
    padding: clamp(18px, 3vw, 35px);
  }

  #wh-fp-gallery .wh-fpg__sheet {
    padding: 11px;
  }

  #wh-fp-gallery .wh-fpg__sheet-top {
    padding: 7px 7px 0;
    font-size: clamp(7px, .95vw, 9px);
  }

  #wh-fp-gallery .wh-fpg__sheet-bottom {
    padding: 0 7px 6px;
    font-size: 8px;
  }

  #wh-fp-gallery .wh-fpg__preview-badge {
    top: 15px;
    left: 15px;
    min-height: 27px;
    padding: 7px 11px;
    font-size: 9px;
  }

  /* CARD BODY */

  #wh-fp-gallery .wh-fpg__card-body {
    padding: 23px 3px 0;
  }

  #wh-fp-gallery .wh-fpg__age-label {
    margin-bottom: 12px;
    font-size: 10px;
  }

  #wh-fp-gallery .wh-fpg__card-body h3 {
    margin-bottom: 10px;
    font-size: clamp(25px, 3.1vw, 33px);
  }

  #wh-fp-gallery .wh-fpg__card-body p {
    margin-bottom: 17px;
    font-size: 13px;
  }

  #wh-fp-gallery .wh-fpg__unavailable {
    padding: 10px 14px;
    font-size: 11px;
  }

  /* EMPTY STATE */

  #wh-fp-gallery .wh-fpg__empty {
    margin-top: 30px;
    padding: 65px 30px;
  }

  #wh-fp-gallery .wh-fpg__empty-symbol {
    margin-bottom: 17px;
    font-size: 36px;
  }

  #wh-fp-gallery .wh-fpg__empty h3 {
    margin-bottom: 14px;
    font-size: 37px;
  }

  #wh-fp-gallery .wh-fpg__empty p {
    font-size: 14px;
  }

  /* CLOSING */

  #wh-fp-gallery .wh-fpg__closing {
    gap: 13px;
    margin-top: 90px;
    padding-top: 23px;
  }

  #wh-fp-gallery .wh-fpg__closing-symbol {
    font-size: 24px;
  }

  #wh-fp-gallery .wh-fpg__closing p {
    font-size: 11px;
  }

  #wh-fp-gallery .wh-fpg__closing-label {
    font-size: 9px;
  }

}


/* ==========================================================
   03 — MOBILE | 0–767px
   ========================================================== */

@media (max-width: 767px) {

  #wh-fp-gallery .wh-fpg {
    padding: 83px 20px 95px;
  }

  #wh-fp-gallery .wh-fpg__wrap {
    max-width: 540px;
  }

  /* HEADER */

  #wh-fp-gallery .wh-fpg__header {
    display: block;
    margin-bottom: 48px;
  }

  #wh-fp-gallery .wh-fpg__eyebrow {
    margin-bottom: 20px;
    font-size: 9px;
    letter-spacing: .12em;
  }

  #wh-fp-gallery .wh-fpg__title {
    margin-bottom: 22px;
    font-size: clamp(42px, 10vw, 66px);
  }

  #wh-fp-gallery .wh-fpg__description {
    max-width: 460px;
    font-size: 14px;
    line-height: 1.75;
  }

  /* The seal becomes unnecessary on mobile */

  #wh-fp-gallery .wh-fpg__header-mark {
    display: none;
  }

  /* TOOLBAR */

  #wh-fp-gallery .wh-fpg__toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 25px;
    padding: 15px 0;
  }

  #wh-fp-gallery .wh-fpg__results-text {
    font-size: 12px;
  }

  #wh-fp-gallery .wh-fpg__toolbar-note {
    font-size: 9px;
    text-align: left;
  }

  /* SINGLE-COLUMN GALLERY */

  #wh-fp-gallery .wh-fpg__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 50px;
    width: 100%;
  }

  #wh-fp-gallery .wh-fpg__card {
    width: 100%;
  }

  #wh-fp-gallery .wh-fpg__media {
    aspect-ratio: 1 / 1.08;
    padding: clamp(20px, 6vw, 40px);
    border-radius: 16px;
  }

  #wh-fp-gallery .wh-fpg__sheet {
    width: min(76%, 310px);
    padding: 10px;
  }

  #wh-fp-gallery .wh-fpg__sheet-top {
    padding: 7px 7px 0;
    font-size: clamp(7px, 2vw, 9px);
  }

  #wh-fp-gallery .wh-fpg__sheet-bottom {
    padding: 0 7px 6px;
    font-size: clamp(7px, 1.7vw, 9px);
  }

  #wh-fp-gallery .wh-fpg__preview-badge {
    top: 14px;
    left: 14px;
    min-height: 27px;
    padding: 7px 10px;
    font-size: 8px;
  }

  /* CARD BODY */

  #wh-fp-gallery .wh-fpg__card-body {
    padding: 21px 2px 0;
  }

  #wh-fp-gallery .wh-fpg__age-label {
    margin-bottom: 11px;
    font-size: 10px;
  }

  #wh-fp-gallery .wh-fpg__card-body h3 {
    margin-bottom: 9px;
    font-size: clamp(27px, 6.7vw, 37px);
  }

  #wh-fp-gallery .wh-fpg__card-body p {
    margin-bottom: 16px;
    font-size: 13px;
  }

  #wh-fp-gallery .wh-fpg__unavailable {
    padding: 10px 14px;
    font-size: 11px;
  }

  /* EMPTY STATE */

  #wh-fp-gallery .wh-fpg__empty {
    margin-top: 25px;
    padding: 55px 24px;
  }

  #wh-fp-gallery .wh-fpg__empty-symbol {
    margin-bottom: 14px;
    font-size: 33px;
  }

  #wh-fp-gallery .wh-fpg__empty h3 {
    margin-bottom: 14px;
    font-size: clamp(30px, 8vw, 42px);
  }

  #wh-fp-gallery .wh-fpg__empty p {
    font-size: 13px;
  }

  /* CLOSING NOTE */

  #wh-fp-gallery .wh-fpg__closing {
    gap: 12px;
    margin-top: 75px;
    padding-top: 21px;
  }

  #wh-fp-gallery .wh-fpg__closing-symbol {
    font-size: 24px;
  }

  #wh-fp-gallery .wh-fpg__closing p {
    font-size: 11px;
  }

  #wh-fp-gallery .wh-fpg__closing-line,
  #wh-fp-gallery .wh-fpg__closing-label {
    display: none;
  }

}


/* ==========================================================
   04 — SMALL MOBILE | 0–375px
   ========================================================== */

@media (max-width: 375px) {

  #wh-fp-gallery .wh-fpg {
    padding-left: 16px;
    padding-right: 16px;
  }

  #wh-fp-gallery .wh-fpg__title {
    font-size: clamp(38px, 10vw, 42px);
  }

  #wh-fp-gallery .wh-fpg__media {
    padding: 17px;
  }

  #wh-fp-gallery .wh-fpg__sheet {
    width: 79%;
    padding: 8px;
  }

  #wh-fp-gallery .wh-fpg__preview-badge {
    top: 11px;
    left: 11px;
    padding: 6px 9px;
    font-size: 7px;
  }

}


/* ==========================================================
   05 — TABLET & MOBILE PAPER INTERACTION
   ========================================================== */

@media (max-width: 1024px) and
       (prefers-reduced-motion: no-preference) {

  #wh-fp-gallery .wh-fpg__sheet {
    transition:
      transform .48s cubic-bezier(.2,.75,.2,1),
      box-shadow .48s ease;
  }

  #wh-fp-gallery .wh-fpg__media::before {
    transition:
      opacity .4s ease,
      transform .4s ease;
  }

  /* Mouse or trackpad hover on supported devices */

  @media (hover: hover) and (pointer: fine) {

    #wh-fp-gallery .wh-fpg__card:hover
    .wh-fpg__sheet {
      transform: translateY(-12px) rotate(0deg)
                 scale(1.035);
      box-shadow:
        0 27px 40px rgba(47,50,46,.17),
        0 7px 13px rgba(47,50,46,.07);
    }

    #wh-fp-gallery .wh-fpg__card:hover
    .wh-fpg__media::before {
      opacity: .18;
      transform: scale(1.1);
    }

  }

  /* Immediate tactile response */

  #wh-fp-gallery .wh-fpg__card:active
  .wh-fpg__sheet {
    transform: translateY(-9px) rotate(0deg)
               scale(1.025);
  }

  /* Full animated touch response via JS class */

  #wh-fp-gallery .wh-fpg__card.wh-fpg-is-tapped
  .wh-fpg__sheet {
    animation: whFpgPaperTap .7s
      cubic-bezier(.2,.75,.2,1) both;
  }

  #wh-fp-gallery .wh-fpg__card.wh-fpg-is-tapped
  .wh-fpg__media::before {
    animation: whFpgBlobTap .7s ease both;
  }

}


/* ==========================================================
   06 — TOUCH KEYFRAMES
   ========================================================== */

@keyframes whFpgPaperTap {

  0%, 100% {
    transform: rotate(-3deg) translateY(0);
  }

  45% {
    transform:
      translateY(-16px)
      rotate(1deg)
      scale(1.055);
  }

}

@keyframes whFpgBlobTap {

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

  45% {
    opacity: .23;
    transform: scale(1.14);
  }

}


/* ==========================================================
   07 — MOBILE SCROLL REVEAL PREPARATION
   Activated only after JS adds .wh-fpg-js-ready
   ========================================================== */

@media (max-width: 767px) and
       (prefers-reduced-motion: no-preference) {

  #wh-fp-gallery.wh-fpg-js-ready
  .wh-fpg__card:not(.wh-fpg-is-visible) {
    opacity: 0;
    transform: translateY(24px);
  }

  #wh-fp-gallery.wh-fpg-js-ready
  .wh-fpg__card {
    transition:
      opacity .8s ease,
      transform .8s cubic-bezier(.2,.75,.2,1);
  }

  #wh-fp-gallery.wh-fpg-js-ready
  .wh-fpg__card.wh-fpg-is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ==========================================================
   08 — REDUCED MOTION ACCESSIBILITY
   ========================================================== */

@media (max-width: 1024px) and
       (prefers-reduced-motion: reduce) {

  #wh-fp-gallery .wh-fpg__card,
  #wh-fp-gallery .wh-fpg__sheet,
  #wh-fp-gallery .wh-fpg__media::before {
    animation: none !important;
    transition: none !important;
  }

  #wh-fp-gallery .wh-fpg__card {
    opacity: 1 !important;
    transform: none !important;
  }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-40ac06e *//* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 04 — PRINT. CREATE. ENJOY.

   FROM SCREEN TO PAPER
   DARK CREATIVE STUDIO — DESKTOP v1.0

   Scope: #wh-fp-process
   Desktop: 1025px+
   ========================================================== */

@media (min-width: 1025px) {

  /* ========================================================
     01 — DARK FOUNDATION
     ======================================================== */

  #wh-fp-process {
    --fpp-bg: #172725;
    --fpp-bg-soft: #203531;
    --fpp-paper: #FFF9F0;
    --fpp-muted: #C3D0CA;
    --fpp-teal: #70C8BE;
    --fpp-coral: #F17A68;
    --fpp-gold: #F3BE56;
    --fpp-line: rgba(255,249,240,.16);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpp-bg);
    color: var(--fpp-paper);
  }

  #wh-fp-process,
  #wh-fp-process * {
    box-sizing: border-box;
  }

  #wh-fp-process .wh-fpp {
    position: relative;
    width: 100%;
    padding:
      clamp(120px, 11vw, 185px)
      clamp(40px, 6vw, 110px)
      clamp(110px, 10vw, 165px);
    font-family: "Inter", sans-serif;
  }

  #wh-fp-process .wh-fpp__wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
  }


  /* ========================================================
     02 — ATMOSPHERIC BACKGROUND
     ======================================================== */

  #wh-fp-process .wh-fpp__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  #wh-fp-process .wh-fpp__decor-orb {
    position: absolute;
    width: 750px;
    height: 750px;
    top: -370px;
    right: -260px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(112,200,190,.16) 0%,
      rgba(112,200,190,.055) 45%,
      transparent 72%
    );
  }

  #wh-fp-process .wh-fpp__decor-dot {
    position: absolute;
    left: 7%;
    bottom: 21%;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--fpp-coral);
    opacity: .7;
  }

  #wh-fp-process .wh-fpp__decor-star {
    position: absolute;
    top: 11%;
    right: 11%;
    width: 95px;
    height: 95px;
    opacity: .65;
    transform: rotate(-13deg);
  }


  /* ========================================================
     03 — EDITORIAL HEADER
     ======================================================== */

  #wh-fp-process .wh-fpp__header {
    position: relative;
    max-width: 1150px;
    margin-bottom: clamp(100px, 11vw, 170px);
  }

  #wh-fp-process .wh-fpp__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 29px;
    color: var(--fpp-gold);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .2em;
  }

  #wh-fp-process .wh-fpp__eyebrow-line {
    width: 32px;
    height: 2px;
    flex: 0 0 32px;
    background: currentColor;
  }

  #wh-fp-process .wh-fpp__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 30px;
    padding: 0;
    color: var(--fpp-paper);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(61px, 6.3vw, 108px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.065em;
  }

  #wh-fp-process .wh-fpp__title span {
    color: var(--fpp-teal);
  }

  #wh-fp-process .wh-fpp__description {
    max-width: 620px;
    margin: 0;
    color: var(--fpp-muted);
    font-size: clamp(16px, 1.2vw, 19px);
    font-weight: 400;
    line-height: 1.85;
    letter-spacing: -.01em;
  }


  /* ========================================================
     04 — THE CREATIVE JOURNEY
     ======================================================== */

  #wh-fp-process .wh-fpp__journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(35px, 4vw, 75px);
    width: 100%;
    isolation: isolate;
  }

  /* Curved connector behind the illustrations */

  #wh-fp-process .wh-fpp__path {
    position: absolute;
    z-index: 0;
    top: 80px;
    left: 0;
    width: 100%;
    height: 230px;
    overflow: visible;
    pointer-events: none;
  }

  #wh-fp-process .wh-fpp__path-base {
    stroke: rgba(255,249,240,.2);
  }

  #wh-fp-process .wh-fpp__path-progress {
    stroke: var(--fpp-teal);
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset .12s linear;
  }


  /* ========================================================
     05 — THREE EDITORIAL STATIONS
     ======================================================== */

  #wh-fp-process .wh-fpp__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  #wh-fp-process .wh-fpp__step--two {
    margin-top: 75px;
  }

  #wh-fp-process .wh-fpp__step--three {
    margin-top: 15px;
  }


  /* ========================================================
     06 — CREATIVE VISUAL STAGES
     ======================================================== */

  #wh-fp-process .wh-fpp__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 340px;
    aspect-ratio: 1 / 1;
    isolation: isolate;
  }

  #wh-fp-process .wh-fpp__visual-blob {
    position: absolute;
    z-index: 0;
    width: 88%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,249,240,.085);
    border-radius: 48% 52% 57% 43% / 43% 54% 46% 57%;
    background: radial-gradient(
      circle at 37% 32%,
      rgba(112,200,190,.16),
      rgba(112,200,190,.055) 55%,
      rgba(112,200,190,.025) 80%
    );
    transform: rotate(-12deg);
    transition:
      transform .65s cubic-bezier(.2,.75,.2,1),
      background .5s ease;
  }

  #wh-fp-process .wh-fpp__step--two
  .wh-fpp__visual-blob {
    background: radial-gradient(
      circle at 37% 32%,
      rgba(241,122,104,.19),
      rgba(241,122,104,.055) 60%,
      transparent 85%
    );
    transform: rotate(13deg);
  }

  #wh-fp-process .wh-fpp__step--three
  .wh-fpp__visual-blob {
    background: radial-gradient(
      circle at 37% 32%,
      rgba(243,190,86,.19),
      rgba(243,190,86,.055) 60%,
      transparent 85%
    );
    transform: rotate(-8deg);
  }

  #wh-fp-process .wh-fpp__art {
    position: relative;
    z-index: 2;
    display: block;
    width: min(88%, 340px);
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    filter: drop-shadow(0 20px 18px rgba(0,0,0,.18));
    transition:
      transform .7s cubic-bezier(.2,.75,.2,1),
      filter .7s ease;
  }

  #wh-fp-process .wh-fpp__step--one .wh-fpp__art {
    transform: rotate(-5deg);
  }

  #wh-fp-process .wh-fpp__step--two .wh-fpp__art {
    transform: rotate(5deg);
  }

  #wh-fp-process .wh-fpp__step--three .wh-fpp__art {
    transform: rotate(-3deg);
  }


  /* ========================================================
     07 — FLOATING PROCESS LABELS
     ======================================================== */

  #wh-fp-process .wh-fpp__visual-tag {
    position: absolute;
    z-index: 3;
    right: -8px;
    bottom: 12%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    max-width: 94%;
    padding: 12px 18px;
    border: 1px solid rgba(255,249,240,.16);
    border-radius: 100px;
    background: #293E39;
    color: #FFF9F0;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .12em;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
    transform: rotate(5deg);
  }

  #wh-fp-process .wh-fpp__step--two
  .wh-fpp__visual-tag {
    background: #503B37;
    transform: rotate(-5deg);
  }

  #wh-fp-process .wh-fpp__step--three
  .wh-fpp__visual-tag {
    background: #514632;
    transform: rotate(4deg);
  }


  /* ========================================================
     08 — STEP TYPOGRAPHY
     ======================================================== */

  #wh-fp-process .wh-fpp__step-copy {
    position: relative;
    padding: 28px 5px 0;
  }

  #wh-fp-process .wh-fpp__step-number {
    display: block;
    margin-bottom: 20px;
    color: var(--fpp-gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
  }

  #wh-fp-process .wh-fpp__step-copy h3 {
    margin: 0 0 19px;
    padding: 0;
    color: var(--fpp-paper);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(29px, 2.9vw, 47px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.055em;
  }

  #wh-fp-process .wh-fpp__step-copy p {
    max-width: 360px;
    margin: 0;
    color: var(--fpp-muted);
    font-size: clamp(13px, 1vw, 16px);
    font-weight: 400;
    line-height: 1.8;
  }


  /* ========================================================
     09 — DESKTOP HOVER: CREATIVE LIFT
     ======================================================== */

  @media (hover: hover) and (pointer: fine) {

    #wh-fp-process .wh-fpp__step:hover .wh-fpp__art {
      transform: translateY(-16px) rotate(0deg) scale(1.06);
      filter: drop-shadow(0 30px 20px rgba(0,0,0,.24));
    }

    #wh-fp-process .wh-fpp__step:hover
    .wh-fpp__visual-blob {
      transform: rotate(9deg) scale(1.08);
    }

  }


  /* ========================================================
     10 — CLOSING EDITORIAL NOTE
     ======================================================== */

  #wh-fp-process .wh-fpp__closing {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: clamp(100px, 10vw, 155px);
    padding-top: 27px;
    border-top: 1px solid var(--fpp-line);
  }

  #wh-fp-process .wh-fpp__closing-star {
    color: var(--fpp-coral);
    font-size: 28px;
    line-height: 1;
  }

  #wh-fp-process .wh-fpp__closing p {
    max-width: 440px;
    margin: 0;
    color: var(--fpp-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.7;
  }

  #wh-fp-process .wh-fpp__closing-line {
    flex: 1;
    height: 1px;
    background: var(--fpp-line);
  }

  #wh-fp-process .wh-fpp__closing-label {
    color: #A9BAB1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    white-space: nowrap;
  }


  /* ========================================================
     11 — COMPACT DESKTOP | 1025–1199px
     ======================================================== */

  @media (max-width: 1199px) {

    #wh-fp-process .wh-fpp {
      padding-left: 45px;
      padding-right: 45px;
    }

    #wh-fp-process .wh-fpp__title {
      font-size: 73px;
    }

    #wh-fp-process .wh-fpp__journey {
      column-gap: 22px;
    }

    #wh-fp-process .wh-fpp__visual {
      min-height: 280px;
    }

    #wh-fp-process .wh-fpp__visual-tag {
      right: 0;
      font-size: 8px;
      padding: 10px 12px;
    }

    #wh-fp-process .wh-fpp__step-copy h3 {
      font-size: 31px;
    }

  }


  /* ========================================================
     12 — REDUCED MOTION
     ======================================================== */

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

    #wh-fp-process .wh-fpp__art,
    #wh-fp-process .wh-fpp__visual-blob,
    #wh-fp-process .wh-fpp__path-progress {
      transition: none !important;
      animation: none !important;
    }

    #wh-fp-process .wh-fpp__path-progress {
      stroke-dashoffset: 0;
    }

    #wh-fp-process .wh-fpp__step:hover .wh-fpp__art {
      transform: none;
    }

    #wh-fp-process .wh-fpp__step:hover
    .wh-fpp__visual-blob {
      transform: none;
    }

  }

}











/* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 04 — PRINT. CREATE. ENJOY.

   DARK CREATIVE STUDIO
   TABLET & MOBILE CSS v1.0

   Tablet: 768px–1024px
   Mobile: 0px–767px

   Desktop CSS remains untouched.
   ========================================================== */


/* ==========================================================
   01 — SHARED RESPONSIVE FOUNDATION
   ========================================================== */

@media (max-width: 1024px) {

  #wh-fp-process {
    --fpp-bg: #172725;
    --fpp-bg-soft: #203531;
    --fpp-paper: #FFF9F0;
    --fpp-muted: #C3D0CA;
    --fpp-teal: #70C8BE;
    --fpp-coral: #F17A68;
    --fpp-gold: #F3BE56;
    --fpp-line: rgba(255,249,240,.16);

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpp-bg);
    color: var(--fpp-paper);
  }

  #wh-fp-process,
  #wh-fp-process * {
    box-sizing: border-box;
  }

  #wh-fp-process .wh-fpp {
    position: relative;
    width: 100%;
    font-family: "Inter", sans-serif;
  }

  #wh-fp-process .wh-fpp__wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
  }

  /* Decorative atmosphere */

  #wh-fp-process .wh-fpp__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  #wh-fp-process .wh-fpp__decor-orb {
    position: absolute;
    top: -210px;
    right: -220px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(112,200,190,.16),
      rgba(112,200,190,.045) 55%,
      transparent 75%
    );
  }

  #wh-fp-process .wh-fpp__decor-dot {
    position: absolute;
    left: 6%;
    bottom: 17%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fpp-coral);
    opacity: .65;
  }

  #wh-fp-process .wh-fpp__decor-star {
    position: absolute;
    top: 8%;
    right: 9%;
    width: 62px;
    height: 62px;
    opacity: .55;
    transform: rotate(-13deg);
  }

  /* Shared title */

  #wh-fp-process .wh-fpp__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--fpp-gold);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .15em;
  }

  #wh-fp-process .wh-fpp__eyebrow-line {
    width: 28px;
    height: 2px;
    flex: 0 0 28px;
    background: currentColor;
  }

  #wh-fp-process .wh-fpp__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    color: var(--fpp-paper);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.06em;
  }

  #wh-fp-process .wh-fpp__title span {
    color: var(--fpp-teal);
  }

  #wh-fp-process .wh-fpp__description {
    margin: 0;
    max-width: 610px;
    color: var(--fpp-muted);
    font-weight: 400;
    line-height: 1.8;
  }

  /* Three stations */

  #wh-fp-process .wh-fpp__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #wh-fp-process .wh-fpp__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    isolation: isolate;
  }

  #wh-fp-process .wh-fpp__visual-blob {
    position: absolute;
    z-index: 0;
    width: 89%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,249,240,.09);
    border-radius: 48% 52% 57% 43% / 43% 54% 46% 57%;
    background: radial-gradient(
      circle at 37% 32%,
      rgba(112,200,190,.17),
      rgba(112,200,190,.04) 65%,
      transparent 90%
    );
    transform: rotate(-12deg);
  }

  #wh-fp-process .wh-fpp__step--two
  .wh-fpp__visual-blob {
    background: radial-gradient(
      circle at 37% 32%,
      rgba(241,122,104,.2),
      rgba(241,122,104,.045) 65%,
      transparent 90%
    );
    transform: rotate(13deg);
  }

  #wh-fp-process .wh-fpp__step--three
  .wh-fpp__visual-blob {
    background: radial-gradient(
      circle at 37% 32%,
      rgba(243,190,86,.2),
      rgba(243,190,86,.045) 65%,
      transparent 90%
    );
    transform: rotate(-8deg);
  }

  #wh-fp-process .wh-fpp__art {
    position: relative;
    z-index: 2;
    display: block;
    width: min(88%, 340px);
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    filter: drop-shadow(0 17px 16px rgba(0,0,0,.2));
  }

  #wh-fp-process .wh-fpp__step--one .wh-fpp__art {
    transform: rotate(-5deg);
  }

  #wh-fp-process .wh-fpp__step--two .wh-fpp__art {
    transform: rotate(5deg);
  }

  #wh-fp-process .wh-fpp__step--three .wh-fpp__art {
    transform: rotate(-3deg);
  }

  /* Floating labels */

  #wh-fp-process .wh-fpp__visual-tag {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 93%;
    border: 1px solid rgba(255,249,240,.16);
    border-radius: 100px;
    background: #293E39;
    color: #FFF9F0;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .09em;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,.16);
    transform: rotate(5deg);
  }

  #wh-fp-process .wh-fpp__step--two
  .wh-fpp__visual-tag {
    background: #503B37;
    transform: rotate(-5deg);
  }

  #wh-fp-process .wh-fpp__step--three
  .wh-fpp__visual-tag {
    background: #514632;
    transform: rotate(4deg);
  }

  /* Copy */

  #wh-fp-process .wh-fpp__step-number {
    display: block;
    color: var(--fpp-gold);
    font-weight: 800;
    letter-spacing: .15em;
  }

  #wh-fp-process .wh-fpp__step-copy h3 {
    margin: 0;
    padding: 0;
    color: var(--fpp-paper);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.05em;
  }

  #wh-fp-process .wh-fpp__step-copy p {
    margin: 0;
    color: var(--fpp-muted);
    font-weight: 400;
    line-height: 1.8;
  }

  /* Closing */

  #wh-fp-process .wh-fpp__closing {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--fpp-line);
  }

  #wh-fp-process .wh-fpp__closing-star {
    color: var(--fpp-coral);
    line-height: 1;
  }

  #wh-fp-process .wh-fpp__closing p {
    margin: 0;
    color: var(--fpp-muted);
    line-height: 1.7;
  }

  #wh-fp-process .wh-fpp__closing-line {
    flex: 1;
    height: 1px;
    background: var(--fpp-line);
  }

  #wh-fp-process .wh-fpp__closing-label {
    color: #A9BAB1;
    font-weight: 800;
    letter-spacing: .1em;
    white-space: nowrap;
  }

}


/* ==========================================================
   02 — TABLET | 768px–1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  #wh-fp-process .wh-fpp {
    padding: 105px 5vw 120px;
  }

  #wh-fp-process .wh-fpp__wrap {
    max-width: 980px;
  }

  #wh-fp-process .wh-fpp__header {
    margin-bottom: 85px;
  }

  #wh-fp-process .wh-fpp__eyebrow {
    margin-bottom: 25px;
    font-size: 10px;
  }

  #wh-fp-process .wh-fpp__title {
    margin-bottom: 26px;
    font-size: clamp(50px, 6.7vw, 73px);
  }

  #wh-fp-process .wh-fpp__description {
    font-size: 15px;
  }

  /* Connected horizontal journey */

  #wh-fp-process .wh-fpp__journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: 18px;
    isolation: isolate;
  }

  #wh-fp-process .wh-fpp__path {
    position: absolute;
    z-index: 0;
    top: 40px;
    left: 0;
    width: 100%;
    height: 170px;
    overflow: visible;
    pointer-events: none;
  }

  #wh-fp-process .wh-fpp__path-base {
    stroke: rgba(255,249,240,.2);
  }

  #wh-fp-process .wh-fpp__path-progress {
    stroke: var(--fpp-teal);
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
  }

  /* Staggered stations */

  #wh-fp-process .wh-fpp__step--two {
    margin-top: 52px;
  }

  #wh-fp-process .wh-fpp__step--three {
    margin-top: 12px;
  }

  #wh-fp-process .wh-fpp__visual {
    min-height: 215px;
    aspect-ratio: 1;
  }

  #wh-fp-process .wh-fpp__art {
    width: 93%;
    max-width: 270px;
  }

  #wh-fp-process .wh-fpp__visual-tag {
    right: -4px;
    bottom: 4%;
    min-height: 32px;
    padding: 9px 10px;
    font-size: 7px;
  }

  #wh-fp-process .wh-fpp__step-copy {
    padding: 27px 3px 0;
  }

  #wh-fp-process .wh-fpp__step-number {
    margin-bottom: 16px;
    font-size: 10px;
  }

  #wh-fp-process .wh-fpp__step-copy h3 {
    margin-bottom: 14px;
    font-size: clamp(25px, 3vw, 33px);
  }

  #wh-fp-process .wh-fpp__step-copy p {
    font-size: 12px;
  }

  #wh-fp-process .wh-fpp__closing {
    gap: 13px;
    margin-top: 100px;
    padding-top: 23px;
  }

  #wh-fp-process .wh-fpp__closing-star {
    font-size: 25px;
  }

  #wh-fp-process .wh-fpp__closing p {
    max-width: 380px;
    font-size: 11px;
  }

  #wh-fp-process .wh-fpp__closing-label {
    font-size: 9px;
  }

}


/* ==========================================================
   03 — MOBILE | 0px–767px
   ========================================================== */

@media (max-width: 767px) {

  #wh-fp-process .wh-fpp {
    padding: 87px 20px 98px;
  }

  #wh-fp-process .wh-fpp__wrap {
    max-width: 540px;
  }

  #wh-fp-process .wh-fpp__header {
    margin-bottom: 65px;
  }

  #wh-fp-process .wh-fpp__eyebrow {
    margin-bottom: 20px;
    font-size: 9px;
  }

  #wh-fp-process .wh-fpp__title {
    margin-bottom: 24px;
    font-size: clamp(42px, 10vw, 62px);
  }

  #wh-fp-process .wh-fpp__description {
    font-size: 14px;
  }

  /* Vertical zigzag */

  #wh-fp-process .wh-fpp__journey {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 65px;
    width: 100%;
  }

  /* Desktop path hidden; mobile uses vertical guide */

  #wh-fp-process .wh-fpp__path {
    display: none;
  }

  #wh-fp-process .wh-fpp__journey::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 90px;
    bottom: 130px;
    left: 50%;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(112,200,190,.36) 0 8px,
      transparent 8px 19px
    );
    transform: translateX(-50%);
    pointer-events: none;
  }

  #wh-fp-process .wh-fpp__step {
    width: 100%;
    margin: 0;
  }

  #wh-fp-process .wh-fpp__step--two {
    align-items: flex-end;
  }

  #wh-fp-process .wh-fpp__step--three {
    align-items: flex-start;
  }

  #wh-fp-process .wh-fpp__visual {
    width: 92%;
    min-height: 280px;
    aspect-ratio: 1;
  }

  #wh-fp-process .wh-fpp__step--two .wh-fpp__visual {
    margin-left: auto;
  }

  #wh-fp-process .wh-fpp__step--one .wh-fpp__visual,
  #wh-fp-process .wh-fpp__step--three .wh-fpp__visual {
    margin-right: auto;
  }

  #wh-fp-process .wh-fpp__visual-blob {
    width: 87%;
  }

  #wh-fp-process .wh-fpp__art {
    width: min(85%, 310px);
  }

  #wh-fp-process .wh-fpp__visual-tag {
    right: 0;
    bottom: 8%;
    min-height: 35px;
    padding: 10px 13px;
    font-size: 8px;
  }

  #wh-fp-process .wh-fpp__step-copy {
    width: 100%;
    padding: 21px 2px 0;
  }

  #wh-fp-process .wh-fpp__step-number {
    margin-bottom: 15px;
    font-size: 10px;
  }

  #wh-fp-process .wh-fpp__step-copy h3 {
    margin-bottom: 14px;
    font-size: clamp(33px, 8vw, 44px);
  }

  #wh-fp-process .wh-fpp__step-copy p {
    max-width: 410px;
    font-size: 14px;
  }

  /* Second step's editorial alignment */

  #wh-fp-process .wh-fpp__step--two
  .wh-fpp__step-copy {
    text-align: right;
  }

  #wh-fp-process .wh-fpp__step--two
  .wh-fpp__step-copy p {
    margin-left: auto;
  }

  /* Closing */

  #wh-fp-process .wh-fpp__closing {
    gap: 13px;
    margin-top: 90px;
    padding-top: 23px;
  }

  #wh-fp-process .wh-fpp__closing-star {
    font-size: 27px;
  }

  #wh-fp-process .wh-fpp__closing p {
    font-size: 12px;
  }

  #wh-fp-process .wh-fpp__closing-line,
  #wh-fp-process .wh-fpp__closing-label {
    display: none;
  }

}


/* ==========================================================
   04 — SMALL MOBILE | 0px–375px
   ========================================================== */

@media (max-width: 375px) {

  #wh-fp-process .wh-fpp {
    padding-left: 16px;
    padding-right: 16px;
  }

  #wh-fp-process .wh-fpp__title {
    font-size: clamp(38px, 10vw, 44px);
  }

  #wh-fp-process .wh-fpp__visual {
    min-height: 245px;
  }

  #wh-fp-process .wh-fpp__visual-tag {
    font-size: 7px;
    padding: 9px 10px;
  }

}


/* ==========================================================
   05 — TABLET & MOBILE INTERACTIONS
   ========================================================== */

@media (max-width: 1024px) and
       (prefers-reduced-motion: no-preference) {

  #wh-fp-process .wh-fpp__art,
  #wh-fp-process .wh-fpp__visual-blob {
    transition:
      transform .65s cubic-bezier(.2,.75,.2,1),
      filter .65s ease;
  }

  /* Hover for tablets with mouse */

  @media (hover: hover) and (pointer: fine) {

    #wh-fp-process .wh-fpp__step:hover
    .wh-fpp__art {
      transform: translateY(-13px) rotate(0deg) scale(1.05);
    }

    #wh-fp-process .wh-fpp__step:hover
    .wh-fpp__visual-blob {
      transform: rotate(8deg) scale(1.08);
    }

  }

  /* Instant touch response */

  #wh-fp-process .wh-fpp__step:active
  .wh-fpp__art {
    transform: translateY(-9px) rotate(0deg) scale(1.035);
  }

  /* Full touch animation triggered by JS */

  #wh-fp-process .wh-fpp__step.wh-fpp-is-tapped
  .wh-fpp__art {
    animation: whFppArtTap .75s
      cubic-bezier(.2,.75,.2,1) both;
  }

  #wh-fp-process .wh-fpp__step.wh-fpp-is-tapped
  .wh-fpp__visual-blob {
    animation: whFppBlobTap .75s ease both;
  }

}


/* ==========================================================
   06 — SCROLL REVEAL
   Activated only by the future JS controller
   ========================================================== */

@media (max-width: 1024px) and
       (prefers-reduced-motion: no-preference) {

  #wh-fp-process.wh-fpp-js-ready
  .wh-fpp__step:not(.wh-fpp-is-visible) {
    opacity: 0;
    transform: translateY(34px);
  }

  #wh-fp-process.wh-fpp-js-ready .wh-fpp__step {
    transition:
      opacity .85s ease,
      transform .85s cubic-bezier(.2,.75,.2,1);
  }

  #wh-fp-process.wh-fpp-js-ready
  .wh-fpp__step.wh-fpp-is-visible {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ==========================================================
   07 — ANIMATION KEYFRAMES
   ========================================================== */

@keyframes whFppArtTap {

  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }

  45% {
    transform:
      translateY(-18px)
      rotate(2deg)
      scale(1.055);
  }

}

@keyframes whFppBlobTap {

  0%, 100% {
    transform: scale(1) rotate(0deg);
  }

  45% {
    transform: scale(1.12) rotate(8deg);
  }

}


/* ==========================================================
   08 — REDUCED MOTION
   ========================================================== */

@media (max-width: 1024px) and
       (prefers-reduced-motion: reduce) {

  #wh-fp-process .wh-fpp__step,
  #wh-fp-process .wh-fpp__art,
  #wh-fp-process .wh-fpp__visual-blob,
  #wh-fp-process .wh-fpp__path-progress {
    animation: none !important;
    transition: none !important;
  }

  #wh-fp-process .wh-fpp__step {
    opacity: 1 !important;
    transform: none !important;
  }

  #wh-fp-process .wh-fpp__path-progress {
    stroke-dashoffset: 0;
  }

}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-047390c *//* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 05 — THE ADVENTURE DOESN'T END HERE

   GOLDEN CREATIVE FINALE
   DESKTOP CSS v1.0

   Container: #wh-fp-final
   Theme: wh-theme-light
   Desktop: 1025px+
   ========================================================== */

@media (min-width: 1025px) {

  /* ========================================================
     01 — GOLDEN FOUNDATION
     ======================================================== */

  #wh-fp-final {
    --fpf-gold: #F3BE56;
    --fpf-ink: #202626;
    --fpf-coral: #F17A68;
    --fpf-teal: #198E88;
    --fpf-cream: #FFF9F0;
    --fpf-muted: #665332;

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpf-gold);
    color: var(--fpf-ink);
  }

  #wh-fp-final,
  #wh-fp-final * {
    box-sizing: border-box;
  }

  #wh-fp-final .wh-fpf {
    position: relative;
    width: 100%;
    padding:
      clamp(115px, 10vw, 170px)
      clamp(40px, 6vw, 110px)
      38px;
    font-family: "Inter", sans-serif;
  }

  #wh-fp-final .wh-fpf__wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
      minmax(0, 1.02fr)
      minmax(0, .98fr);
    align-items: center;
    gap: clamp(10px, 2vw, 45px);
    width: 100%;
    max-width: 1450px;
    min-height: 650px;
    margin: 0 auto;
  }


  /* ========================================================
     02 — AMBIENT BACKGROUND
     ======================================================== */

  #wh-fp-final .wh-fpf__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  #wh-fp-final .wh-fpf__ambient-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
  }

  #wh-fp-final .wh-fpf__ambient-orb--one {
    width: 770px;
    height: 770px;
    top: -370px;
    right: -250px;
    background: rgba(255,249,240,.16);
  }

  #wh-fp-final .wh-fpf__ambient-orb--two {
    width: 590px;
    height: 590px;
    bottom: -385px;
    left: -255px;
    background: rgba(255,249,240,.14);
  }

  #wh-fp-final .wh-fpf__ambient-dot {
    position: absolute;
    display: block;
    border-radius: 50%;
  }

  #wh-fp-final .wh-fpf__ambient-dot--one {
    left: 5%;
    top: 18%;
    width: 13px;
    height: 13px;
    background: var(--fpf-coral);
  }

  #wh-fp-final .wh-fpf__ambient-dot--two {
    right: 9%;
    bottom: 19%;
    width: 10px;
    height: 10px;
    background: var(--fpf-teal);
  }

  #wh-fp-final .wh-fpf__ambient-spark {
    position: absolute;
    top: 12%;
    right: 14%;
    width: 76px;
    height: 76px;
    opacity: .45;
    transform: rotate(-18deg);
  }


  /* ========================================================
     03 — EDITORIAL CONTENT
     ======================================================== */

  #wh-fp-final .wh-fpf__content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 720px;
    padding: 25px 0 55px;
  }

  #wh-fp-final .wh-fpf__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 31px;
    color: #66502A;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .18em;
  }

  #wh-fp-final .wh-fpf__eyebrow-line {
    width: 33px;
    height: 2px;
    flex: 0 0 33px;
    background: currentColor;
  }

  #wh-fp-final .wh-fpf__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin: 0 0 30px;
    padding: 0;
    color: var(--fpf-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(59px, 5.4vw, 92px);
    font-weight: 800;
    line-height: 1.045;
    letter-spacing: -.065em;
  }

  #wh-fp-final .wh-fpf__title span {
    color: #FFF9F0;
    text-shadow: 0 3px 0 rgba(92,65,26,.09);
  }

  #wh-fp-final .wh-fpf__lead {
    max-width: 550px;
    margin: 0 0 18px;
    color: var(--fpf-ink);
    font-size: clamp(19px, 1.55vw, 24px);
    font-weight: 650;
    line-height: 1.5;
    letter-spacing: -.02em;
  }

  #wh-fp-final .wh-fpf__description {
    max-width: 505px;
    margin: 0;
    color: var(--fpf-muted);
    font-size: 15px;
    font-weight: 450;
    line-height: 1.8;
  }


  /* ========================================================
     04 — CORAL CTA
     ======================================================== */

  #wh-fp-final .wh-fpf__actions {
    display: flex;
    align-items: center;
    margin-top: 39px;
  }

  #wh-fp-final .wh-fpf__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 23px;
    min-height: 65px;
    padding: 9px 10px 9px 28px;
    border: 2px solid var(--fpf-ink);
    border-radius: 100px;
    background: var(--fpf-coral);
    color: var(--fpf-ink);
    text-decoration: none;
    box-shadow: 6px 7px 0 var(--fpf-ink);
    transition:
      transform .3s ease,
      box-shadow .3s ease,
      background .3s ease;
  }

  #wh-fp-final .wh-fpf__cta-text {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.015em;
    white-space: nowrap;
  }

  #wh-fp-final .wh-fpf__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 50%;
    background: var(--fpf-ink);
    color: #FFFFFF;
    transition: transform .3s ease;
  }

  #wh-fp-final .wh-fpf__cta-icon svg {
    width: 20px;
    height: 20px;
  }

  #wh-fp-final .wh-fpf__cta:hover {
    transform: translate(4px, 4px);
    box-shadow: 2px 3px 0 var(--fpf-ink);
    background: #FF9180;
    color: var(--fpf-ink);
  }

  #wh-fp-final .wh-fpf__cta:hover
  .wh-fpf__cta-icon {
    transform: rotate(45deg);
  }

  #wh-fp-final .wh-fpf__cta:focus-visible {
    outline: 3px solid var(--fpf-ink);
    outline-offset: 5px;
  }


  /* ========================================================
     05 — EDITORIAL SIGNATURE
     ======================================================== */

  #wh-fp-final .wh-fpf__signature {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 49px;
    color: #755B30;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .17em;
  }

  #wh-fp-final .wh-fpf__signature-mark {
    color: var(--fpf-teal);
    font-size: 25px;
    line-height: 1;
  }


  /* ========================================================
     06 — CREATIVE BOOK STAGE
     ======================================================== */

  #wh-fp-final .wh-fpf__visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 610px;
    aspect-ratio: 1 / 1;
    isolation: isolate;
  }

  #wh-fp-final .wh-fpf__visual-halo {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
  }

  #wh-fp-final .wh-fpf__visual-halo--one {
    z-index: 0;
    width: 95%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,249,240,.47);
    transform: rotate(-10deg);
  }

  #wh-fp-final .wh-fpf__visual-halo--two {
    z-index: 0;
    width: 74%;
    aspect-ratio: 1;
    border: 1px dashed rgba(32,38,38,.2);
    transform: rotate(12deg);
  }


  /* ========================================================
     07 — MAIN OPEN BOOK
     ======================================================== */

  #wh-fp-final .wh-fpf__book {
    position: relative;
    z-index: 2;
    display: block;
    width: min(116%, 740px);
    max-width: none;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 26px 20px rgba(100,71,30,.12));
    transform: rotate(-3deg) translateY(0);
    transform-origin: 50% 60%;
    transition:
      transform .8s cubic-bezier(.2,.75,.2,1),
      filter .8s ease;
  }


  /* ========================================================
     08 — FLOATING CREATIVE ELEMENTS
     ======================================================== */

  #wh-fp-final .wh-fpf__float {
    position: absolute;
    z-index: 3;
    display: block;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 9px 8px rgba(91,68,35,.12));
    transform-origin: center;
  }

  /* Gold star — upper left */

  #wh-fp-final .wh-fpf__float--star {
    top: 7%;
    left: 4%;
    width: 100px;
    transform: rotate(-15deg);
    animation: whFpfFloatStar 6s ease-in-out infinite;
  }

  /* Coral flower — upper right */

  #wh-fp-final .wh-fpf__float--flower {
    top: 10%;
    right: 1%;
    width: 125px;
    transform: rotate(12deg);
    animation: whFpfFloatFlower 7s ease-in-out infinite;
  }

  /* Teal sparkle — middle right */

  #wh-fp-final .wh-fpf__float--spark {
    top: 44%;
    right: -5%;
    width: 75px;
    transform: rotate(18deg);
    animation: whFpfFloatSpark 5.6s ease-in-out infinite;
  }

  /* Coral brushstroke — lower left */

  #wh-fp-final .wh-fpf__float--stroke {
    bottom: 11%;
    left: -6%;
    width: 125px;
    transform: rotate(-10deg);
    animation: whFpfFloatStroke 7.3s ease-in-out infinite;
  }

  /* Little paper sheet — above book */

  #wh-fp-final .wh-fpf__float--paper {
    top: -1%;
    left: 45%;
    width: 91px;
    transform: rotate(15deg);
    animation: whFpfFloatPaper 6.8s ease-in-out infinite;
  }


  /* ========================================================
     09 — MICRO SPARKLES
     ======================================================== */

  #wh-fp-final .wh-fpf__tiny-star {
    position: absolute;
    z-index: 4;
    display: block;
    color: var(--fpf-cream);
    font-size: 29px;
    line-height: 1;
    pointer-events: none;
  }

  #wh-fp-final .wh-fpf__tiny-star--one {
    top: 24%;
    left: 25%;
    animation: whFpfTwinkle 3.8s ease-in-out infinite;
  }

  #wh-fp-final .wh-fpf__tiny-star--two {
    top: 27%;
    right: 21%;
    color: var(--fpf-teal);
    font-size: 39px;
    animation: whFpfTwinkle 4.5s ease-in-out 1s infinite;
  }

  #wh-fp-final .wh-fpf__tiny-star--three {
    bottom: 22%;
    right: 11%;
    color: var(--fpf-coral);
    animation: whFpfTwinkle 3.3s ease-in-out .7s infinite;
  }


  /* ========================================================
     10 — BOOK HOVER WOW
     ======================================================== */

  @media (hover: hover) and (pointer: fine) {

    #wh-fp-final .wh-fpf__visual:hover .wh-fpf__book {
      transform: rotate(0deg) translateY(-17px) scale(1.045);
      filter: drop-shadow(0 36px 25px rgba(100,71,30,.18));
    }

  }


  /* ========================================================
     11 — FLOATING ANIMATIONS
     ======================================================== */

  @keyframes whFpfFloatStar {
    0%, 100% {
      transform: translateY(0) rotate(-15deg);
    }
    50% {
      transform: translateY(-15px) rotate(-7deg);
    }
  }

  @keyframes whFpfFloatFlower {
    0%, 100% {
      transform: translateY(0) rotate(12deg);
    }
    50% {
      transform: translateY(-18px) rotate(23deg);
    }
  }

  @keyframes whFpfFloatSpark {
    0%, 100% {
      transform: translateY(0) rotate(18deg) scale(1);
    }
    50% {
      transform: translateY(-12px) rotate(34deg) scale(1.09);
    }
  }

  @keyframes whFpfFloatStroke {
    0%, 100% {
      transform: translateY(0) rotate(-10deg);
    }
    50% {
      transform: translateY(-10px) rotate(-3deg);
    }
  }

  @keyframes whFpfFloatPaper {
    0%, 100% {
      transform: translateY(0) rotate(15deg);
    }
    50% {
      transform: translateY(-20px) rotate(7deg);
    }
  }

  @keyframes whFpfTwinkle {
    0%, 100% {
      opacity: .35;
      transform: scale(.85);
    }
    50% {
      opacity: 1;
      transform: scale(1.15);
    }
  }


  /* ========================================================
     12 — LOWER EDITORIAL SIGNATURE
     ======================================================== */

  #wh-fp-final .wh-fpf__bottom {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    width: 100%;
    max-width: 1450px;
    margin: 35px auto 0;
  }

  #wh-fp-final .wh-fpf__bottom-line {
    height: 1px;
    flex: 1;
    background: rgba(32,38,38,.22);
  }

  #wh-fp-final .wh-fpf__bottom-label {
    color: #71592F;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .17em;
    text-align: center;
    white-space: nowrap;
  }


  /* ========================================================
     13 — COMPACT DESKTOP | 1025–1199px
     ======================================================== */

  @media (max-width: 1199px) {

    #wh-fp-final .wh-fpf {
      padding-left: 42px;
      padding-right: 42px;
    }

    #wh-fp-final .wh-fpf__wrap {
      min-height: 570px;
      gap: 12px;
    }

    #wh-fp-final .wh-fpf__title {
      font-size: clamp(53px, 5.3vw, 69px);
    }

    #wh-fp-final .wh-fpf__visual {
      min-height: 480px;
    }

    #wh-fp-final .wh-fpf__book {
      width: 115%;
    }

    #wh-fp-final .wh-fpf__float--star {
      width: 78px;
    }

    #wh-fp-final .wh-fpf__float--flower {
      width: 95px;
    }

    #wh-fp-final .wh-fpf__float--paper {
      width: 75px;
    }

  }


  /* ========================================================
     14 — REDUCED MOTION
     ======================================================== */

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

    #wh-fp-final .wh-fpf__book,
    #wh-fp-final .wh-fpf__float,
    #wh-fp-final .wh-fpf__tiny-star,
    #wh-fp-final .wh-fpf__cta,
    #wh-fp-final .wh-fpf__cta-icon {
      animation: none !important;
      transition: none !important;
    }

    #wh-fp-final .wh-fpf__visual:hover
    .wh-fpf__book {
      transform: none;
    }

  }

}










/* ==========================================================
   WONDERHUE STUDIO — FREE PRINTABLES
   SECTION 05 — GOLDEN CREATIVE FINALE

   TABLET & MOBILE CSS v1.0
   PAPER WORLDS AWAKENING

   Tablet: 768px–1024px
   Mobile: 0px–767px

   Desktop remains untouched.
   ========================================================== */


/* ==========================================================
   01 — SHARED RESPONSIVE FOUNDATION
   ========================================================== */

@media (max-width: 1024px) {

  #wh-fp-final {
    --fpf-gold: #F3BE56;
    --fpf-ink: #202626;
    --fpf-coral: #F17A68;
    --fpf-teal: #198E88;
    --fpf-cream: #FFF9F0;
    --fpf-muted: #665332;

    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: var(--fpf-gold);
    color: var(--fpf-ink);
  }

  #wh-fp-final,
  #wh-fp-final * {
    box-sizing: border-box;
  }

  #wh-fp-final .wh-fpf {
    position: relative;
    width: 100%;
    font-family: "Inter", sans-serif;
  }

  #wh-fp-final .wh-fpf__wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
  }


  /* ========================================================
     02 — GOLDEN ATMOSPHERE
     ======================================================== */

  #wh-fp-final .wh-fpf__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  #wh-fp-final .wh-fpf__ambient-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
  }

  #wh-fp-final .wh-fpf__ambient-orb--one {
    top: -210px;
    right: -190px;
    width: 470px;
    height: 470px;
    background: rgba(255,249,240,.17);
  }

  #wh-fp-final .wh-fpf__ambient-orb--two {
    bottom: -200px;
    left: -170px;
    width: 420px;
    height: 420px;
    background: rgba(255,249,240,.13);
  }

  #wh-fp-final .wh-fpf__ambient-dot {
    position: absolute;
    display: block;
    border-radius: 50%;
  }

  #wh-fp-final .wh-fpf__ambient-dot--one {
    top: 11%;
    left: 5%;
    width: 10px;
    height: 10px;
    background: var(--fpf-coral);
  }

  #wh-fp-final .wh-fpf__ambient-dot--two {
    right: 6%;
    bottom: 13%;
    width: 8px;
    height: 8px;
    background: var(--fpf-teal);
  }

  #wh-fp-final .wh-fpf__ambient-spark {
    position: absolute;
    top: 7%;
    right: 9%;
    width: 56px;
    height: 56px;
    opacity: .4;
    transform: rotate(-18deg);
  }


  /* ========================================================
     03 — EDITORIAL CONTENT
     ======================================================== */

  #wh-fp-final .wh-fpf__content {
    position: relative;
    z-index: 5;
    width: 100%;
  }

  #wh-fp-final .wh-fpf__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #66502A;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .14em;
  }

  #wh-fp-final .wh-fpf__eyebrow-line {
    width: 29px;
    height: 2px;
    flex: 0 0 29px;
    background: currentColor;
  }

  #wh-fp-final .wh-fpf__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    color: var(--fpf-ink);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    line-height: 1.045;
    letter-spacing: -.065em;
  }

  #wh-fp-final .wh-fpf__title span {
    color: var(--fpf-cream);
    text-shadow: 0 3px 0 rgba(92,65,26,.09);
  }

  #wh-fp-final .wh-fpf__lead {
    margin: 0;
    color: var(--fpf-ink);
    font-weight: 650;
    line-height: 1.55;
    letter-spacing: -.02em;
  }

  #wh-fp-final .wh-fpf__description {
    margin: 0;
    color: var(--fpf-muted);
    font-weight: 450;
    line-height: 1.8;
  }


  /* ========================================================
     04 — CTA BUTTON
     ======================================================== */

  #wh-fp-final .wh-fpf__actions {
    display: flex;
    align-items: center;
  }

  #wh-fp-final .wh-fpf__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    border: 2px solid var(--fpf-ink);
    border-radius: 100px;
    background: var(--fpf-coral);
    color: var(--fpf-ink);
    text-decoration: none;
    box-shadow: 5px 6px 0 var(--fpf-ink);
    transition:
      transform .3s ease,
      box-shadow .3s ease,
      background .3s ease;
  }

  #wh-fp-final .wh-fpf__cta-text {
    font-family: "Inter", sans-serif;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
  }

  #wh-fp-final .wh-fpf__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--fpf-ink);
    color: #FFFFFF;
    transition: transform .3s ease;
  }

  #wh-fp-final .wh-fpf__cta-icon svg {
    width: 19px;
    height: 19px;
  }

  #wh-fp-final .wh-fpf__cta:active {
    transform: translate(4px, 4px);
    box-shadow: 1px 2px 0 var(--fpf-ink);
  }

  #wh-fp-final .wh-fpf__cta:active
  .wh-fpf__cta-icon {
    transform: rotate(45deg);
  }

  #wh-fp-final .wh-fpf__cta:focus-visible {
    outline: 3px solid var(--fpf-ink);
    outline-offset: 5px;
  }


  /* ========================================================
     05 — SIGNATURE
     ======================================================== */

  #wh-fp-final .wh-fpf__signature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #755B30;
    font-weight: 800;
    letter-spacing: .13em;
  }

  #wh-fp-final .wh-fpf__signature-mark {
    color: var(--fpf-teal);
    line-height: 1;
  }


  /* ========================================================
     06 — BOOK VISUAL
     ======================================================== */

  #wh-fp-final .wh-fpf__visual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    isolation: isolate;
  }

  #wh-fp-final .wh-fpf__visual-halo {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
  }

  #wh-fp-final .wh-fpf__visual-halo--one {
    z-index: 0;
    width: 91%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,249,240,.47);
    transform: rotate(-10deg);
  }

  #wh-fp-final .wh-fpf__visual-halo--two {
    z-index: 0;
    width: 72%;
    aspect-ratio: 1;
    border: 1px dashed rgba(32,38,38,.2);
    transform: rotate(12deg);
  }

  #wh-fp-final .wh-fpf__book {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 19px 16px rgba(100,71,30,.14));
    transform-origin: 50% 60%;
    transform: rotate(-3deg);
  }


  /* ========================================================
     07 — FLOATING ELEMENTS
     ======================================================== */

  #wh-fp-final .wh-fpf__float {
    position: absolute;
    z-index: 3;
    display: block;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 7px 7px rgba(91,68,35,.11));
    transform-origin: center;
  }

  #wh-fp-final .wh-fpf__float--star {
    top: 5%;
    left: 5%;
    width: 75px;
    transform: rotate(-15deg);
  }

  #wh-fp-final .wh-fpf__float--flower {
    top: 8%;
    right: 3%;
    width: 95px;
    transform: rotate(12deg);
  }

  #wh-fp-final .wh-fpf__float--spark {
    top: 47%;
    right: -1%;
    width: 61px;
    transform: rotate(18deg);
  }

  #wh-fp-final .wh-fpf__float--stroke {
    bottom: 12%;
    left: 1%;
    width: 100px;
    transform: rotate(-10deg);
  }

  #wh-fp-final .wh-fpf__float--paper {
    top: 0;
    left: 45%;
    width: 70px;
    transform: rotate(15deg);
  }

  #wh-fp-final .wh-fpf__tiny-star {
    position: absolute;
    z-index: 4;
    display: block;
    color: var(--fpf-cream);
    font-size: 25px;
    line-height: 1;
    pointer-events: none;
  }

  #wh-fp-final .wh-fpf__tiny-star--one {
    top: 23%;
    left: 25%;
  }

  #wh-fp-final .wh-fpf__tiny-star--two {
    top: 28%;
    right: 20%;
    color: var(--fpf-teal);
    font-size: 32px;
  }

  #wh-fp-final .wh-fpf__tiny-star--three {
    bottom: 23%;
    right: 13%;
    color: var(--fpf-coral);
  }


  /* ========================================================
     08 — BOTTOM SIGNATURE
     ======================================================== */

  #wh-fp-final .wh-fpf__bottom {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    margin: 0 auto;
  }

  #wh-fp-final .wh-fpf__bottom-line {
    height: 1px;
    flex: 1;
    background: rgba(32,38,38,.22);
  }

  #wh-fp-final .wh-fpf__bottom-label {
    color: #71592F;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .12em;
    text-align: center;
  }

}


/* ==========================================================
   09 — TABLET | 768px–1024px
   ========================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  #wh-fp-final .wh-fpf {
    padding: 105px 6vw 42px;
  }

  #wh-fp-final .wh-fpf__wrap {
    max-width: 850px;
  }

  #wh-fp-final .wh-fpf__content {
    max-width: 730px;
  }

  #wh-fp-final .wh-fpf__eyebrow {
    margin-bottom: 27px;
    font-size: 10px;
  }

  #wh-fp-final .wh-fpf__title {
    gap: 4px;
    margin-bottom: 28px;
    font-size: clamp(58px, 7.6vw, 86px);
  }

  #wh-fp-final .wh-fpf__lead {
    max-width: 580px;
    margin-bottom: 16px;
    font-size: 20px;
  }

  #wh-fp-final .wh-fpf__description {
    max-width: 560px;
    font-size: 15px;
  }

  #wh-fp-final .wh-fpf__actions {
    margin-top: 36px;
  }

  #wh-fp-final .wh-fpf__cta {
    min-height: 61px;
    padding: 9px 10px 9px 25px;
  }

  #wh-fp-final .wh-fpf__cta-text {
    font-size: 13px;
  }

  #wh-fp-final .wh-fpf__cta-icon {
    width: 41px;
    height: 41px;
  }

  #wh-fp-final .wh-fpf__signature {
    margin-top: 40px;
    font-size: 9px;
  }

  #wh-fp-final .wh-fpf__signature-mark {
    font-size: 24px;
  }

  /* Oversized editorial book */

  #wh-fp-final .wh-fpf__visual {
    width: min(100%, 680px);
    min-height: 530px;
    margin: 20px auto 0;
    aspect-ratio: 1 / 1;
  }

  #wh-fp-final .wh-fpf__book {
    width: 104%;
  }

  #wh-fp-final .wh-fpf__bottom {
    max-width: 850px;
    margin-top: 12px;
  }

  #wh-fp-final .wh-fpf__bottom-label {
    font-size: 10px;
    white-space: nowrap;
  }

}


/* ==========================================================
   10 — MOBILE | 0px–767px
   ========================================================== */

@media (max-width: 767px) {

  #wh-fp-final .wh-fpf {
    padding: 83px 20px 35px;
  }

  #wh-fp-final .wh-fpf__wrap {
    max-width: 540px;
  }

  #wh-fp-final .wh-fpf__eyebrow {
    margin-bottom: 23px;
    font-size: 9px;
    letter-spacing: .11em;
  }

  #wh-fp-final .wh-fpf__title {
    gap: 5px;
    margin-bottom: 23px;
    font-size: clamp(42px, 10vw, 65px);
  }

  #wh-fp-final .wh-fpf__lead {
    max-width: 475px;
    margin-bottom: 15px;
    font-size: 17px;
  }

  #wh-fp-final .wh-fpf__description {
    max-width: 455px;
    font-size: 14px;
  }

  /* Mobile CTA */

  #wh-fp-final .wh-fpf__actions {
    margin-top: 33px;
  }

  #wh-fp-final .wh-fpf__cta {
    min-height: 59px;
    padding: 8px 9px 8px 22px;
  }

  #wh-fp-final .wh-fpf__cta-text {
    font-size: 12px;
  }

  #wh-fp-final .wh-fpf__cta-icon {
    width: 40px;
    height: 40px;
  }

  /* Micro signature */

  #wh-fp-final .wh-fpf__signature {
    margin-top: 35px;
    font-size: 8px;
    letter-spacing: .1em;
  }

  #wh-fp-final .wh-fpf__signature-mark {
    font-size: 22px;
  }

  /* Book below text */

  #wh-fp-final .wh-fpf__visual {
    width: 100%;
    min-height: 330px;
    margin: 28px auto 0;
    aspect-ratio: 1 / 1;
  }

  #wh-fp-final .wh-fpf__book {
    width: 113%;
  }

  /* Floating elements scaled for touch screens */

  #wh-fp-final .wh-fpf__float--star {
    top: 5%;
    left: 1%;
    width: 53px;
  }

  #wh-fp-final .wh-fpf__float--flower {
    top: 9%;
    right: 0;
    width: 66px;
  }

  #wh-fp-final .wh-fpf__float--spark {
    top: 47%;
    right: -1%;
    width: 42px;
  }

  #wh-fp-final .wh-fpf__float--stroke {
    bottom: 11%;
    left: -1%;
    width: 65px;
  }

  #wh-fp-final .wh-fpf__float--paper {
    top: -1%;
    left: 45%;
    width: 46px;
  }

  #wh-fp-final .wh-fpf__tiny-star {
    font-size: 20px;
  }

  #wh-fp-final .wh-fpf__tiny-star--two {
    font-size: 26px;
  }

  /* Bottom editorial signature */

  #wh-fp-final .wh-fpf__bottom {
    gap: 9px;
    margin-top: 20px;
  }

  #wh-fp-final .wh-fpf__bottom-label {
    max-width: 230px;
    font-size: 8px;
    letter-spacing: .085em;
  }

}


/* ==========================================================
   11 — SMALL MOBILE | 0px–375px
   ========================================================== */

@media (max-width: 375px) {

  #wh-fp-final .wh-fpf {
    padding-left: 16px;
    padding-right: 16px;
  }

  #wh-fp-final .wh-fpf__title {
    font-size: clamp(38px, 10vw, 43px);
  }

  #wh-fp-final .wh-fpf__lead {
    font-size: 16px;
  }

  #wh-fp-final .wh-fpf__visual {
    min-height: 290px;
  }

  #wh-fp-final .wh-fpf__float--star {
    width: 46px;
  }

  #wh-fp-final .wh-fpf__float--flower {
    width: 58px;
  }

  #wh-fp-final .wh-fpf__float--paper {
    width: 40px;
  }

  #wh-fp-final .wh-fpf__bottom-label {
    font-size: 7px;
  }

}


/* ==========================================================
   12 — PAPER WORLDS AWAKENING
   Responsive animations powered by CSS
   ========================================================== */

@media (max-width: 1024px) and
       (prefers-reduced-motion: no-preference) {

  /*
   Progressive enhancement:
   Content remains visible in browsers without
   scroll-driven animation support.
  */

  @supports (animation-timeline: view()) {

    #wh-fp-final .wh-fpf__book {
      animation: whFpfBookAwaken 1s both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    #wh-fp-final .wh-fpf__float--star {
      animation: whFpfWorldStar 1s both;
      animation-timeline: view();
      animation-range: entry 5% entry 95%;
    }

    #wh-fp-final .wh-fpf__float--flower {
      animation: whFpfWorldFlower 1s both;
      animation-timeline: view();
      animation-range: entry 10% entry 100%;
    }

    #wh-fp-final .wh-fpf__float--paper {
      animation: whFpfWorldPaper 1s both;
      animation-timeline: view();
      animation-range: entry 12% entry 100%;
    }

    #wh-fp-final .wh-fpf__float--spark,
    #wh-fp-final .wh-fpf__float--stroke {
      animation: whFpfWorldSpark 1s both;
      animation-timeline: view();
      animation-range: entry 10% entry 100%;
    }

  }

  /* Gentle continuous motion for micro sparkles */

  #wh-fp-final .wh-fpf__tiny-star--one {
    animation: whFpfResponsiveTwinkle 4s
      ease-in-out infinite;
  }

  #wh-fp-final .wh-fpf__tiny-star--two {
    animation: whFpfResponsiveTwinkle 4.7s
      ease-in-out .8s infinite;
  }

  #wh-fp-final .wh-fpf__tiny-star--three {
    animation: whFpfResponsiveTwinkle 3.6s
      ease-in-out .5s infinite;
  }

  /* Press interaction remains CSS-only */

  #wh-fp-final .wh-fpf__visual:active
  .wh-fpf__book {
    transform: translateY(-10px)
               rotate(0deg)
               scale(1.025);
  }

}


/* ==========================================================
   13 — ENTRANCE KEYFRAMES
   ========================================================== */

@keyframes whFpfBookAwaken {

  from {
    opacity: .55;
    transform:
      translateY(42px)
      rotate(-11deg)
      scale(.92);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      rotate(-3deg)
      scale(1);
  }

}

@keyframes whFpfWorldStar {

  from {
    opacity: 0;
    transform:
      translateY(28px)
      rotate(-35deg)
      scale(.65);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      rotate(-15deg)
      scale(1);
  }

}

@keyframes whFpfWorldFlower {

  from {
    opacity: 0;
    transform:
      translateY(34px)
      rotate(-14deg)
      scale(.65);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      rotate(12deg)
      scale(1);
  }

}

@keyframes whFpfWorldPaper {

  from {
    opacity: 0;
    transform:
      translateY(40px)
      rotate(-17deg)
      scale(.7);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      rotate(15deg)
      scale(1);
  }

}

@keyframes whFpfWorldSpark {

  from {
    opacity: 0;
    transform:
      translateY(25px)
      scale(.7);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }

}

@keyframes whFpfResponsiveTwinkle {

  0%, 100% {
    opacity: .4;
    transform: scale(.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }

}


/* ==========================================================
   14 — REDUCED MOTION
   ========================================================== */

@media (max-width: 1024px) and
       (prefers-reduced-motion: reduce) {

  #wh-fp-final .wh-fpf__book,
  #wh-fp-final .wh-fpf__float,
  #wh-fp-final .wh-fpf__tiny-star,
  #wh-fp-final .wh-fpf__cta,
  #wh-fp-final .wh-fpf__cta-icon {
    animation: none !important;
    transition: none !important;
  }

  #wh-fp-final .wh-fpf__book,
  #wh-fp-final .wh-fpf__float {
    opacity: 1 !important;
  }

}





/* ==========================================================
   WONDERHUE — SECTION 05
   TABLET & MOBILE ANIMATION FIX v2.0

   Add at the VERY END of existing CSS.
   Do not modify approved Desktop.
   ========================================================== */

@media screen and (max-width: 1024px) {

  /* --------------------------------------------------------
     01 — RESTORE FLOATING ANIMATIONS
     -------------------------------------------------------- */

  #wh-fp-final .wh-fpf__float--star {
    animation: whFpfMobileStar 5.5s ease-in-out infinite !important;
  }

  #wh-fp-final .wh-fpf__float--flower {
    animation: whFpfMobileFlower 6.2s ease-in-out infinite !important;
  }

  #wh-fp-final .wh-fpf__float--paper {
    animation: whFpfMobilePaper 5.8s ease-in-out infinite !important;
  }

  #wh-fp-final .wh-fpf__float--spark {
    animation: whFpfMobileSpark 4.9s ease-in-out infinite !important;
  }

  #wh-fp-final .wh-fpf__float--stroke {
    animation: whFpfMobileStroke 6.5s ease-in-out infinite !important;
  }


  /* --------------------------------------------------------
     02 — BOOK INTERACTION
     Works on touch and mouse.
     -------------------------------------------------------- */

  #wh-fp-final .wh-fpf__book {
    transition:
      transform .65s cubic-bezier(.2,.75,.2,1),
      filter .65s ease !important;
  }

  #wh-fp-final .wh-fpf__visual:hover .wh-fpf__book,
  #wh-fp-final .wh-fpf__visual:active .wh-fpf__book {
    transform:
      translateY(-15px)
      rotate(0deg)
      scale(1.045) !important;

    filter:
      drop-shadow(0 30px 23px rgba(100,71,30,.2));
  }

}


/* ==========================================================
   03 — RESPONSIVE FLOATING KEYFRAMES
   ========================================================== */

@keyframes whFpfMobileStar {

  0%, 100% {
    transform: translateY(0) rotate(-15deg);
  }

  50% {
    transform: translateY(-15px) rotate(-7deg);
  }

}

@keyframes whFpfMobileFlower {

  0%, 100% {
    transform: translateY(0) rotate(12deg);
  }

  50% {
    transform: translateY(-17px) rotate(22deg);
  }

}

@keyframes whFpfMobilePaper {

  0%, 100% {
    transform: translateY(0) rotate(15deg);
  }

  50% {
    transform: translateY(-19px) rotate(7deg);
  }

}

@keyframes whFpfMobileSpark {

  0%, 100% {
    transform: translateY(0) rotate(18deg) scale(1);
  }

  50% {
    transform: translateY(-12px) rotate(31deg) scale(1.1);
  }

}

@keyframes whFpfMobileStroke {

  0%, 100% {
    transform: translateY(0) rotate(-10deg);
  }

  50% {
    transform: translateY(-11px) rotate(-2deg);
  }

}


/* ==========================================================
   04 — ACCESSIBILITY
   Reduced motion takes priority.
   ========================================================== */

@media screen and (max-width: 1024px) and
       (prefers-reduced-motion: reduce) {

  #wh-fp-final .wh-fpf__float,
  #wh-fp-final .wh-fpf__book {
    animation: none !important;
    transition: none !important;
  }

}





/* ==========================================================
   WONDERHUE — SECTION 05
   TABLET & MOBILE — CTA INTERACTION FIX v1.0

   Add below ANIMATION FIX v2.0
   Desktop remains untouched.
   ========================================================== */

@media (max-width: 1024px) {

  /* Smooth arrow movement */

  #wh-fp-final .wh-fpf__cta-icon {
    transition: transform .35s ease;
  }

  /* Mouse / trackpad hover */

  @media (hover: hover) and (pointer: fine) {

    #wh-fp-final .wh-fpf__cta:hover {
      transform: translate(4px, 4px);
      box-shadow: 1px 2px 0 #202626;
      background: #FF9180;
      color: #202626;
    }

    #wh-fp-final .wh-fpf__cta:hover
    .wh-fpf__cta-icon {
      transform: rotate(45deg);
    }

  }

  /* Touch feedback */

  #wh-fp-final .wh-fpf__cta:active {
    transform: translate(4px, 4px);
    box-shadow: 1px 2px 0 #202626;
    background: #FF9180;
  }

  #wh-fp-final .wh-fpf__cta:active
  .wh-fpf__cta-icon {
    transform: rotate(45deg);
  }

}

/* Accessibility */
@media (max-width: 1024px) and
       (prefers-reduced-motion: reduce) {

  #wh-fp-final .wh-fpf__cta,
  #wh-fp-final .wh-fpf__cta-icon {
    transition: none !important;
  }

}/* End custom CSS */