@import url("https://fonts.googleapis.com/css2?family=KoHo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");


/* =========================================================
   FULL-WIDTH SECTION
   Begins with the same colour used at the bottom of the hero.
========================================================= */

#kinaraAshOutSection {
  --ink: #20363f;
  --muted: #667d82;
  --deep: #173642;
  --sage: #dfece6;
  --sage2: #b9d5ca;
  --sky: #eaf6fb;
  --blue: #86b9c7;
  --sand: #faf5eb;
  --sand2: #ead8b9;
  --ember: #b86a54;

  position: relative;
  left: 50%;

  width: 100vw;
  max-width: 100vw;

  margin-left: -50vw;
  margin-top: 0;
  margin-bottom: 0;

  overflow: hidden;

  color: var(--ink);

  font-family:
    "KoHo",
    "Segoe UI",
    Arial,
    sans-serif;

  /*
    Hero ends at #e7f0ed.
    Starting here with exactly the same colour removes the seam.
  */
  background:
    radial-gradient(
      circle at 82% 32%,
      rgba(191, 220, 227, .28) 0%,
      rgba(191, 220, 227, .12) 25%,
      transparent 52%
    ),

    radial-gradient(
      circle at 12% 72%,
      rgba(146, 176, 166, .16) 0%,
      transparent 42%
    ),

    linear-gradient(
      180deg,
      #e7f0ed 0%,
      #edf5f2 34%,
      #f8fbf8 72%,
      #fffdfa 100%
    );

  /* Explicitly keep the top edge flat and seamless. */
  border-top: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Prevent any custom decorative top divider from being generated here. */
#kinaraAshOutSection::before,
#kinaraAshOutSection::after {
  content: none !important;
  display: none !important;
}


#kinaraAshOutSection,
#kinaraAshOutSection * {
  box-sizing: border-box;
}


/* =========================================================
   INNER LAYOUT
   No border, no rounded card, no box shadow.
========================================================= */

#kinaraAshOutBlock {
  position: relative;

  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;

  margin: 0 auto;

  padding:
    clamp(58px, 7vw, 96px)
    0
    clamp(64px, 8vw, 108px);

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(330px, .92fr);

  gap: clamp(28px, 5vw, 72px);

  align-items: center;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}


/* =========================================================
   COPY
========================================================= */

#kinaraAshOutBlock .ka-copy {
  position: relative;
  z-index: 2;

  padding: 0;
}


#kinaraAshOutBlock .ka-kicker {
  margin: 0 0 13px;

  color: #4f7a80;

  font-size: .78rem;
  font-weight: 700;

  letter-spacing: .19em;
}


#kinaraAshOutBlock h2 {
  margin: 0;

  color: var(--deep);

  font-size:
    clamp(
      4rem,
      7vw,
      6.3rem
    );

  line-height: .91;

  letter-spacing: -.05em;

  font-weight: 700;
}


#kinaraAshOutBlock .ka-description {
  max-width: 650px;

  margin:
    24px
    0
    17px;

  color: #425a61;

  font-size:
    clamp(
      1.02rem,
      1.65vw,
      1.23rem
    );

  line-height: 1.62;

  font-weight: 400;
}


/* =========================================================
   RECRUITMENT STATUS
========================================================= */

#kinaraAshOutBlock .ka-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 13px;

  border: 1px solid rgba(61, 136, 103, .15);
  border-radius: 999px;

  background: rgba(223, 236, 230, .68);

  color: #355e4e;

  font-size: .76rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .06em;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


#kinaraAshOutBlock .ka-status::before {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #3d8867;

  box-shadow:
    0 0 0 4px rgba(61, 136, 103, .08);
}


/* =========================================================
   ACTIONS
========================================================= */

#kinaraAshOutBlock .ka-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;
}


#kinaraAshOutBlock .ka-btn {
  min-width: 132px;
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 18px;

  border:
    1px solid
    rgba(23, 54, 66, .14);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, .58);

  color: var(--deep);

  font-weight: 700;

  text-decoration: none;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


#kinaraAshOutBlock .ka-btn:hover {
  transform: translateY(-2px);

  background:
    rgba(255, 255, 255, .82);

  border-color:
    rgba(23, 54, 66, .22);
}


#kinaraAshOutBlock .ka-btn.primary {
  border-color: var(--deep);

  background: var(--deep);
  color: #fff;

  box-shadow:
    0 10px 25px
    rgba(23, 54, 66, .15);
}


#kinaraAshOutBlock .ka-btn.primary:hover {
  background: #0f4f4a;

  box-shadow:
    0 14px 30px
    rgba(23, 54, 66, .18);
}


/* =========================================================
   ANIMATION AREA
   IMPORTANT: transparent — it is no longer a separate card.
========================================================= */

#kinaraAshOutBlock .ka-animation {
  position: relative;

  min-height: 390px;

  display: grid;
  place-items: center;

  padding: 12px 0;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  overflow: visible;
}


/* Soft glow belongs to the SECTION, not a card */
#kinaraAshOutBlock .ka-animation::before {
  content: "";

  position: absolute;

  width: min(420px, 86%);
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.46) 0%,
      rgba(255,255,255,.20) 42%,
      transparent 72%
    );

  pointer-events: none;

  z-index: 0;
}


#kinaraAshOutBlock .ka-animation::after {
  display: none;
}


/* =========================================================
   ANIMATION SCENE
========================================================= */

#kinaraAshOutBlock .ka-scene {
  position: relative;

  width: min(330px, 88%);
  height: 300px;

  z-index: 2;

  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


#kinaraAshOutBlock .ka-ashtray {
  position: absolute;

  left: 50%;
  bottom: 36px;

  transform: translateX(-50%);

  width: 210px;
  height: 56px;

  border: 5px solid var(--deep);
  border-top-width: 4px;

  border-radius:
    14px
    14px
    42px
    42px;

  background:
    rgba(255,255,255,.28);

  box-shadow:
    0 11px 0
    rgba(23,54,66,.06);

  /* The bowl sits above the falling ash, so ash disappears into it. */
  z-index: 4;
}


#kinaraAshOutBlock .ka-ashtray::before,
#kinaraAshOutBlock .ka-ashtray::after {
  content: "";

  position: absolute;

  top: -9px;

  width: 48px;
  height: 12px;

  border: 4px solid var(--deep);
  border-bottom: 0;

  background:
    rgba(234,246,251,.68);

  border-radius:
    9px
    9px
    0
    0;
}


#kinaraAshOutBlock .ka-ashtray::before {
  left: 18px;
}


#kinaraAshOutBlock .ka-ashtray::after {
  right: 18px;
}


#kinaraAshOutBlock .ka-ashtray span {
  position: absolute;

  left: 30px;
  right: 30px;
  bottom: 10px;

  height: 11px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(83,96,94,.26) 0%,
      rgba(83,96,94,.16) 48%,
      rgba(23,54,66,.08) 72%,
      transparent 100%
    );

  transform-origin: center;
  animation: kaAshBed 2.35s ease-in-out infinite;
}


#kinaraAshOutBlock .ka-cigarette {
  position: absolute;

  left: 92px;
  top: 103px;

  width: 150px;
  height: 25px;

  transform-origin:
    15px 50%;

  transform:
    rotate(11deg);

  animation:
    kaTap
    2.35s
    cubic-bezier(.45,.03,.25,1)
    infinite;

  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  z-index: 6;
}


#kinaraAshOutBlock .ka-filter {
  position: absolute;

  left: 0;
  top: 0;

  width: 46px;
  height: 25px;

  border: 4px solid var(--deep);

  border-radius:
    13px
    0
    0
    13px;

  background: var(--sand2);
}


#kinaraAshOutBlock .ka-paper {
  position: absolute;

  left: 42px;
  right: 10px;
  top: 0;

  height: 25px;

  border-top:
    4px solid var(--deep);

  border-bottom:
    4px solid var(--deep);

  background:
    rgba(255,255,255,.92);
}


#kinaraAshOutBlock .ka-ember {
  position: absolute;

  right: 0;
  top: 0;

  width: 18px;
  height: 25px;

  border: 4px solid var(--deep);

  border-radius:
    0
    13px
    13px
    0;

  background: var(--ember);

  box-shadow:
    0 0 0 0
    rgba(184,106,84,.35);

  animation:
    kaGlow
    1.15s
    ease-in-out
    infinite;
}


#kinaraAshOutBlock .ka-hand {
  position: absolute;

  left: 26px;
  top: 90px;

  width: 92px;
  height: 100px;

  z-index: 4;

  animation:
    kaHand
    2.35s
    cubic-bezier(.45,.03,.25,1)
    infinite;

  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


#kinaraAshOutBlock .ka-palm {
  position: absolute;

  left: 4px;
  bottom: 3px;

  width: 72px;
  height: 68px;

  border: 4px solid var(--deep);

  border-radius:
    48%
    52%
    44%
    56%;

  background: var(--sand2);

  transform:
    rotate(-10deg);
}


#kinaraAshOutBlock .ka-finger {
  position: absolute;

  width: 56px;
  height: 20px;

  border: 4px solid var(--deep);

  border-radius: 14px;

  background: var(--sand2);

  transform-origin:
    left center;
}


#kinaraAshOutBlock .ka-finger-one {
  left: 42px;
  top: 25px;

  transform:
    rotate(5deg);
}


#kinaraAshOutBlock .ka-finger-two {
  left: 40px;
  top: 50px;

  transform:
    rotate(-3deg);
}


#kinaraAshOutBlock .ka-ash {
  position: absolute;

  width: 8px;
  height: 8px;

  background: #5d6d6c;

  border-radius: 50%;

  opacity: 0;

  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* Below the tray bowl (z-index 4), above the ambient glow. */
  z-index: 3;
}


#kinaraAshOutBlock .ka-ash-one {
  left: 236px;
  top: 128px;

  --ash-x: -28px;
  --ash-y: 79px;
  --ash-r: 18deg;

  animation:
    kaAsh
    2.35s
    .54s
    cubic-bezier(.22,.61,.36,1)
    infinite;
}


#kinaraAshOutBlock .ka-ash-two {
  left: 241px;
  top: 130px;

  width: 5px;
  height: 5px;

  --ash-x: -44px;
  --ash-y: 77px;
  --ash-r: -24deg;

  animation:
    kaAsh
    2.35s
    .68s
    cubic-bezier(.22,.61,.36,1)
    infinite;
}


#kinaraAshOutBlock .ka-ash-three {
  left: 232px;
  top: 129px;

  width: 6px;
  height: 6px;

  --ash-x: -18px;
  --ash-y: 79px;
  --ash-r: 28deg;

  animation:
    kaAsh
    2.35s
    .80s
    cubic-bezier(.22,.61,.36,1)
    infinite;
}


#kinaraAshOutBlock .ka-smoke {
  position: absolute;

  border:
    4px solid
    rgba(79,111,99,.55);

  border-left-color: transparent;
  border-bottom-color: transparent;

  border-radius: 50%;

  opacity: 0;

  z-index: 2;
}


#kinaraAshOutBlock .ka-smoke-one {
  left: 229px;
  top: 66px;

  width: 30px;
  height: 54px;

  transform:
    rotate(-18deg);

  animation:
    kaSmoke
    2.5s
    ease-out
    infinite;
}


#kinaraAshOutBlock .ka-smoke-two {
  left: 250px;
  top: 48px;

  width: 24px;
  height: 46px;

  transform:
    rotate(12deg);

  animation:
    kaSmoke
    2.5s
    .6s
    ease-out
    infinite;
}


/* =========================================================
   ANIMATION KEYFRAMES
========================================================= */

@keyframes kaTap {
  0%, 38%, 100% {
    transform:
      rotate(11deg)
      translateY(0);
  }

  47% {
    transform:
      rotate(14.5deg)
      translateY(4px);
  }

  56% {
    transform:
      rotate(9.5deg)
      translateY(-1px);
  }

  66% {
    transform:
      rotate(11deg)
      translateY(0);
  }
}


@keyframes kaHand {
  0%, 38%, 100% {
    transform:
      translateY(0);
  }

  47% {
    transform:
      translateY(4px);
  }

  56% {
    transform:
      translateY(-1px);
  }

  66% {
    transform:
      translateY(0);
  }
}


@keyframes kaGlow {
  50% {
    box-shadow:
      0 0 12px 3px
      rgba(184,106,84,.24);
  }
}


@keyframes kaAsh {
  0%, 26% {
    opacity: 0;
    transform:
      translate3d(0,0,0)
      rotate(0deg)
      scale(.55);
  }

  33% {
    opacity: .9;
  }

  58% {
    opacity: .78;
    transform:
      translate3d(
        calc(var(--ash-x) * .46),
        calc(var(--ash-y) * .44),
        0
      )
      rotate(calc(var(--ash-r) * .45))
      scale(.86);
  }

  76% {
    opacity: .68;
    transform:
      translate3d(
        var(--ash-x),
        var(--ash-y),
        0
      )
      rotate(var(--ash-r))
      scale(.95);
  }

  /* The ash has reached the inner lip of the tray here. */
  82% {
    opacity: .18;
    transform:
      translate3d(
        var(--ash-x),
        calc(var(--ash-y) + 4px),
        0
      )
      rotate(var(--ash-r))
      scale(.8);
  }

  86%, 100% {
    opacity: 0;
    transform:
      translate3d(
        var(--ash-x),
        calc(var(--ash-y) + 7px),
        0
      )
      rotate(var(--ash-r))
      scale(.72);
  }
}


@keyframes kaAshBed {
  0%, 44%, 100% {
    opacity: .78;
    transform: scaleX(1) scaleY(1);
  }

  62% {
    opacity: 1;
    transform: scaleX(1.035) scaleY(1.08);
  }

  76% {
    opacity: .86;
    transform: scaleX(1.01) scaleY(1.02);
  }
}


@keyframes kaSmoke {
  0% {
    opacity: 0;

    transform:
      translateY(9px)
      scale(.75)
      rotate(-8deg);
  }

  20% {
    opacity: .5;
  }

  75% {
    opacity: .18;
  }

  100% {
    opacity: 0;

    transform:
      translateY(-28px)
      scale(1.22)
      rotate(10deg);
  }
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 760px) {

  #kinaraAshOutBlock {
    width:
      min(
        100% - 36px,
        620px
      );

    grid-template-columns: 1fr;

    gap: 8px;

    padding:
      48px
      0
      56px;
  }


  #kinaraAshOutBlock h2 {
    font-size:
      clamp(
        3.7rem,
        17vw,
        5rem
      );
  }


  #kinaraAshOutBlock .ka-description {
    margin-top: 18px;

    font-size: 1rem;
  }


  #kinaraAshOutBlock .ka-actions {
    display: grid;

    grid-template-columns:
      1fr
      1fr;
  }


  #kinaraAshOutBlock .ka-btn.primary {
    grid-column:
      1 / -1;
  }


  /*
    Mobile animation uses its own geometry instead of shrinking the desktop
    scene with transform:scale(). That keeps the hand, cigarette, falling ash
    and ashtray aligned on narrow screens.
  */
  #kinaraAshOutBlock .ka-animation {
    min-height: 305px;
    padding: 4px 0 2px;
    overflow: hidden;
  }


  #kinaraAshOutBlock .ka-animation::before {
    width: min(330px, 94vw);
  }


  #kinaraAshOutBlock .ka-scene {
    width: min(300px, 92vw);
    height: 270px;

    transform: none;
    -webkit-transform: none;

    margin: 0 auto;
  }


  #kinaraAshOutBlock .ka-ashtray {
    left: 50%;
    bottom: 8px;

    width: 204px;
    height: 55px;

    transform: translateX(-50%);
  }


  #kinaraAshOutBlock .ka-cigarette {
    left: 82px;
    top: 86px;

    width: 146px;
    height: 24px;

    transform-origin: 14px 50%;
  }


  #kinaraAshOutBlock .ka-filter {
    width: 44px;
    height: 24px;
  }


  #kinaraAshOutBlock .ka-paper {
    left: 40px;
    height: 24px;
  }


  #kinaraAshOutBlock .ka-ember {
    width: 18px;
    height: 24px;
  }


  #kinaraAshOutBlock .ka-hand {
    left: 20px;
    top: 75px;

    width: 88px;
    height: 98px;
  }


  #kinaraAshOutBlock .ka-palm {
    width: 68px;
    height: 64px;
  }


  #kinaraAshOutBlock .ka-finger {
    width: 53px;
    height: 19px;
  }


  #kinaraAshOutBlock .ka-finger-one {
    left: 40px;
    top: 24px;
  }


  #kinaraAshOutBlock .ka-finger-two {
    left: 38px;
    top: 48px;
  }


  /*
    Particle origins are placed beneath the ember. Their mobile trajectories
    finish just inside the ashtray opening rather than below/outside the bowl.
  */
  #kinaraAshOutBlock .ka-ash-one {
    left: 222px;
    top: 112px;
    --ash-x: -25px;
    --ash-y: 92px;
  }


  #kinaraAshOutBlock .ka-ash-two {
    left: 226px;
    top: 113px;
    --ash-x: -39px;
    --ash-y: 91px;
  }


  #kinaraAshOutBlock .ka-ash-three {
    left: 218px;
    top: 113px;
    --ash-x: -15px;
    --ash-y: 92px;
  }


  #kinaraAshOutBlock .ka-smoke-one {
    left: 216px;
    top: 38px;
  }


  #kinaraAshOutBlock .ka-smoke-two {
    left: 235px;
    top: 22px;
  }

}


@media (max-width: 420px) {

  #kinaraAshOutBlock {
    width: calc(100% - 28px);
  }


  #kinaraAshOutBlock .ka-actions {
    grid-template-columns: 1fr;
  }


  #kinaraAshOutBlock .ka-btn.primary {
    grid-column: auto;
  }


  #kinaraAshOutBlock .ka-animation {
    min-height: 286px;
  }


  #kinaraAshOutBlock .ka-scene {
    width: min(276px, 90vw);
    height: 252px;
  }


  #kinaraAshOutBlock .ka-ashtray {
    width: 190px;
    height: 52px;
    bottom: 7px;
  }


  #kinaraAshOutBlock .ka-ashtray::before,
  #kinaraAshOutBlock .ka-ashtray::after {
    width: 43px;
  }


  #kinaraAshOutBlock .ka-cigarette {
    left: 72px;
    top: 82px;
    width: 136px;
  }


  #kinaraAshOutBlock .ka-hand {
    left: 14px;
    top: 72px;
    transform-origin: left center;
  }


  #kinaraAshOutBlock .ka-ash-one {
    left: 202px;
    top: 108px;
    --ash-x: -25px;
    --ash-y: 84px;
  }


  #kinaraAshOutBlock .ka-ash-two {
    left: 206px;
    top: 109px;
    --ash-x: -38px;
    --ash-y: 83px;
  }


  #kinaraAshOutBlock .ka-ash-three {
    left: 198px;
    top: 109px;
    --ash-x: -15px;
    --ash-y: 84px;
  }


  #kinaraAshOutBlock .ka-smoke-one {
    left: 196px;
    top: 34px;
  }


  #kinaraAshOutBlock .ka-smoke-two {
    left: 214px;
    top: 19px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  /*
    Respect the device/OS Reduce Motion setting.
    The illustration remains visible, but repetitive motion is removed.
  */
  #kinaraAshOutBlock .ka-cigarette,
  #kinaraAshOutBlock .ka-hand,
  #kinaraAshOutBlock .ka-ember,
  #kinaraAshOutBlock .ka-ash,
  #kinaraAshOutBlock .ka-smoke,
  #kinaraAshOutBlock .ka-ashtray span {
    animation: none !important;
  }

  #kinaraAshOutBlock .ka-cigarette {
    transform: rotate(11deg) !important;
  }

  #kinaraAshOutBlock .ka-hand {
    transform: none !important;
  }

  #kinaraAshOutBlock .ka-ember {
    box-shadow: 0 0 8px 2px rgba(184,106,84,.16);
  }

  #kinaraAshOutBlock .ka-smoke-one {
    opacity: .20;
    transform: translateY(-8px) scale(.9) rotate(-10deg);
  }

  #kinaraAshOutBlock .ka-smoke-two {
    opacity: .12;
    transform: translateY(-10px) scale(.9) rotate(8deg);
  }

  #kinaraAshOutBlock .ka-ash {
    opacity: 0 !important;
  }

}